@charset "UTF-8";

/*
 Theme Name: Arti Waine
 Template: artiwaine.com
 Description: Private Policy & Use of Cookies CSS
 Author: Thomas Federico
 Author URI: https://www.thomasfederico.com
 Version: 1.0.16
*/

/* ---------------------------------------------------------
  CSS SUMMARY
  0. =@IMPORTS........(DOCUMENT)
  1. =RESET BOX.......(DOCUMENT)
  2. =HTML/BODY.......(DOCUMENT)
  3. =GENERAL STYLES..(DOCUMENT)
  4. =FX..............(TRANSITION CLASS)
  5. =HEADER..........(TOP BAR)
  6. =NAVIGATION......(TOP NAV)
  7. =MAIN............(CONTAINER FOR SECTIONS)
  8. =QUOTES..........(BETWEEN SECTIONS)
  9. =SECTIONS
  10. =FOOTER
  11.=MODALS
  12.=MEDIA QUERIES
--------------------------------------------------------- */

/*------------------------------------------------------- */
/* ========= Theme customization starts here ============ */
/*------------------------------------------------------- */

/* === 0. @IMPORTS === */



/* === 1. RESET BOX === */

/*!
 * Bootstrap Reboot v4.3.1 (https://getbootstrap.com/)
 * Copyright 2011-2019 The Bootstrap Authors
 * Copyright 2011-2019 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
 */
 *,::after,::before{box-sizing:border-box}
 html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}article,aside,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}abbr[data-original-title],abbr[title]{text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;border-bottom:0;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#007bff;text-decoration:none;background-color:transparent}a:hover{color:#0056b3;text-decoration:underline}a:not([href]):not([tabindex]){color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}a:not([href]):not([tabindex]):focus{outline:0}code,kbd,pre,samp{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}pre{margin-top:0;margin-bottom:1rem;overflow:auto}figure{margin:0 0 1rem}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}caption{padding-top:.75rem;padding-bottom:.75rem;color:#6c757d;text-align:left;caption-side:bottom}th{text-align:inherit}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{padding:0;border-style:none}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=date],input[type=datetime-local],input[type=month],input[type=time]{-webkit-appearance:listbox}textarea{overflow:auto;resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{display:block;width:100%;max-width:100%;padding:0;margin-bottom:.5rem;font-size:1.5rem;line-height:inherit;color:inherit;white-space:normal}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}summary{display:list-item;cursor:pointer}template{display:none}[hidden]{display:none!important}

 /* === 2. HTML/BODY (DOCUMENT) === */

body
{
  background:#000;
  margin:0!important;
  padding:0!important;
  width:100%;
  overflow-x: hidden!important;
  touch-action: manipulation;
  -ms-touch-action: manipulation;
  -webkit-overflow-scrolling: hidden!important;
}


a, a:visited {
color:#fff;
text-decoration:none!important;
cursor:pointer;
}

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

.f-center
{
  display:flex;
  width:100%;
  margin:0 auto;
}

#navbar
{
align-items:center;
padding:0!important;
height:60px;
background: #161B21;
z-index:300!important;
}

.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 200!important
}


#navbar .navbar-nav
{
display:flex;
flex-direction: row;
padding:0!important;
max-width:1440px;

}

#navbar .pull-sm-left
{
justify-content: flex-end!important;
}

#navbar ul.pull-sm-left, #navbar ul.pull-sm-right
{
width:46%;
font-size: .8125rem;
/*background: crimson;*/
}

#navbar .navbar-logo a
{
display: flex;
padding:0 1.5rem!important;
margin:0 auto!important;
/*border-left: 1px solid rgba(249, 241, 186, .2);
border-right: 1px solid rgba(249, 241, 186, .2);*/
border-radius: 0!important;
}

.initials-icon {
display: flex;
align-items: center;
justify-content: center;
height: 60px;
width: 24px;
margin: 0 auto;
}

.initials-icon > svg {
width: 100%;
}

#navbar ul
{
position:relative;
padding:0!important;
align-items:center;
/*background: pink;*/
}

#navbar ul li
{
display:flex;
align-items: center;
height:60px;
margin-right:.5rem;
padding:0;
}

#navbar ul li:last-child
{
margin-right:0;
}

#navbar ul li a
{
  color:#fff;
height:60px;
padding:1.125rem .5rem .875rem;
border:2px solid #161B21;
}

#navbar ul li a, #navbar ul li a.active,  #navbar ul li a.active:hover
{
  text-transform: uppercase!important;
  cursor:pointer;
}

#navbar ul li a.active, #navbar ul li a:hover, #navbar ul li a.active:hover
{
border-radius:4px;
cursor:pointer;
}

#navbar ul li a:hover
{
color:#E8DB78;
border-bottom:2px solid #E8DB78!important;
border-radius: 0!important;
transition: all .2s ease;

}


.active, .active:visited
{
/*background: blue;*/
color:#E8DB78!important;
border:2px solid #161B21;
border-bottom:2px solid #E8DB78!important;
border-radius: 0!important;
transition: all .2s ease;
cursor:pointer;
}



/* SECTIONS */

section
{
position: relative; /* required */
flex-direction:column;
align-items:flex-start;
/*height:100vh;*/
padding:0;
color:#fff;
}

section:first-of-type
{
  /*margin:-60px auto 0;*/
  /*padding:54px 0 0;*/
}

section:nth-child(odd)
{

}
section:nth-child(even)
{
/*background: none ;*/
}

.section-bg {
  position: relative;
  background: #121418;
  margin: 0;
  padding: 0 0 106px;
}


/**
section:not(:first-child)
{
  margin:0 auto 0;
  padding:59px 0 0;
}
*/

.row
{
/*background: crimson;*/
max-width: 1150px;
width: 90%;
margin: 0 auto !important;
text-align: center;

}

h1 {
  align-items: center;
  justify-content: center;
  text-align: center; /* Necessary for width < 531px */
  letter-spacing: 5px;
  text-transform: uppercase;
  font-size: 32px;
  color: #E8DB78;
  padding: 0;
  height: 212px;
}


.tagline, h1, h2, h3, .card .card-title
{
  font-family:'Marcellus SC', sans-serif;
}



p {
color: #FBF6D3;
margin: 0 0 1rem;
text-align: justify;
margin: 0 auto;
margin-bottom: 0px;
font-size: 18px;
text-align: left !important;
margin-bottom: 1rem !important;
/*background: red;*/
}

p:last-of-type {
    margin: 0;
        margin-bottom: 0px;
    margin-bottom: 0 !important;
}

.section > a, .section > a:visited
{
  text-decoration: none;
  font-weight: bold!important;
  color:#E8DB78!important;
}

.bold
{
  width:100%;
  margin:44px auto!important;
  font-weight: bold;
  text-transform: uppercase;
}

.bold:first-child
{
  margin:0 auto 44px!important;
}

/* CARDS */

.card-group {
  margin:30px auto 0;
  text-align: center;
  width:100%;
}

.card-group:first-child {
  margin:0 auto;
}

.card
{
  display: flex;
  width:100%;
  flex-direction: column;
  margin:0 auto;
  background:#171D25!important;
  border-radius: 5px!important;
  border:0;
  align-items: stretch;
}

.card:nth-child(even):last-child
{
  margin:0 0 0 30px;
}

.card:nth-child(odd):last-child
{
  margin:0;
}


.card .card-icon
{
  /*background:purple!important;*/
  text-align:center;
  position: relative;
  transform: translateY(-50%);
  display:flex;
  width:60px;
  height:60px;
  flex-direction:column;
  flex: 1 0 auto;
  justify-content: center;
  margin:0 auto!important;
  text-transform:uppercase;
  z-index: 3;
  font-size: 1em!important;
  padding:1em;
  /*background: #1D242C;*/
  background: #171D25;
  box-shadow: 0 2px 5px #000;
  z-index: 5;
  border-radius:60px;
  border:1px solid rgba(255,255,255, .02)!important;
}



.card .card-icon svg
{
  display: flex;
  text-align:center;
  height:100%;
  width:100%;
}

.card .card-icon i
{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align:center;
  height:28px;
  width:auto;
  font-size: 1.8225rem;
  z-index: 200px;
  color: #F9F1BA;
}

.card .card-title
{
  color:#E8DB78!important;
}


.card .card-title
{
position: relative;
display:flex;
flex-direction:column;
flex: 1 0 auto;
justify-content: center;
margin:0 auto 1rem!important;
text-transform:uppercase;
z-index: 3;
font-size: 1em!important;
padding:0 0 1em;
/*background: #1D242C;*/

}

.card-header
{
  position: relative;
  height:11vw;
  max-height:148px;
  overflow: hidden!important;
  padding:0!important;
  border-radius: 4px 4px 0 0!important;
}

.overlay, .card-overlay
{
  position: absolute;
  top:0; left:0;
  width:100%;
  height: 100%;
  z-index: 2;
}

.card-overlay
{
  background: rgba(40,40,40,.4);
}

.card-body
{
  padding:0!important;
  flex:1;

}


.card-desc
{
  padding:0 15px;
}

.card-desc p
{
  font-size: 16px!important;
}

.card a.btn
{
  margin:0 auto;
  width:100%!important;
  font-size:16px!important;
  padding:.75rem!important;
}

.card a.btn, .card a.btn:visited
{
  color:#171D25!important;
  background: #E8DB78!important;
}

.card a.btn:hover
{
  color:#E8DB78!important;
  background: none!important;
}

.card-header, .card-footer
{
  border:0!important
}

.card-footer
{
  background: none;
}

.card .card-photo
{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index: 0!important;
  border-radius: 5px 5px 0 0!important;
}

.card img
{
  width:100%;
  height: auto;
}

/* CTA BUTTONS */

.btn-cta
{
  background:none!important;
  border:2px solid #E8DB78!important;
  border-radius:8px!important;
  color: #F9F1BA!important;
  text-transform:uppercase!important;
  margin:1rem 0 .5rem!important;
  font-weight:550;
}

.card:hover .card-overlay
{

  background: rgba(255,40,40, 0);
  transition: all .2s ease;
}

.card:hover .card-photo
{

    transform:scale(1.2);
}

#contact .card .card-title, #socialize .card .card-title
{
  margin:0 auto!important;
  padding:0;
}

#credits .card
{
  flex-flow: column nowrap;
  flex: 1;
}

#contact .row-cta
{
  margin:0 auto 30px!important;
}


#socialize .card-group .card, #extra-links .card-group .card, #credits .card-group .card
{
  margin-bottom:30px;
}

#socialize .card-group:last-child .card, #extra-links .card-group:last-child .card, #credits .card-group:last-child .card
{
  margin-bottom:0;
}


/* === 4. FX === */

/* TRANSTIONS */

.transition { transition:all .5s ease; }

/* PARALLAX */

.msg {
display: flex;
align-items: center;
height: 392px;
opacity: 1;
text-transform: uppercase;
}




.caption {
position:relative;
  z-index: 100!important;
  width: 100%;
  text-align: center;
  color: #F9F1BA;
  font-size: 25px;
  letter-spacing: 10px;
  text-align:center!important;
  font-size:18px!important;
}



/* SECTIONS */
#home
{
  background: none;
  height:600px;
}

#home > .intro-container {
  position:absolute;
  top:59%;
  left:50%;
  transform:translate(-50%,-50%);
  max-width:651px;
  width: 90%;
  height:auto;
  text-align:center;
  padding:2rem 1rem;
  z-index:5;
  z-index: 400;
  color: #F9F1BA;
  /*background:rgba(0,0,0,.4)!important*/;
}

.overlay
{
  background: rgba(0,0,0,.5);
}


/* MESSAGES */

.msg {
  display: flex;
  align-items: center;
  min-height: 392px;
  opacity: 1;
  text-transform: uppercase;
}

.tagline {
  top:400px;
  font-size:27px;
  margin:1.35rem 0 1rem;
  text-transform:uppercase;
}

.logo {
  width:100%;
  height:auto;
  z-index:3!important;
  margin:0;
  padding:0;
  text-align:center;
}

.logo > svg {
  width:100%;
}

.initials-icon {
height:56px;
width:24px;
margin:0 auto;

}
.initials-icon > svg {
  width:100%;
}

.desc a, .desc a:visited {
  text-decoration: none;
  color:#E8DB78;
  font-weight: bold;
}

/* SECTION: PRODUCTS & SERVICES */

.row-content
{
  margin:0 auto;
}
#services .row-content p:last-child
{
  margin-top: 30px!important;
}

#services .row-content .card-body p:last-child
{
  margin-top: 0!important;
}

/* SECTION: CONTACT */

 .contact-form
{
  max-width:auto!important;

}

.row-form
{
  position: relative;
  width: 100%;
  max-width: 1300px;
}

#contact .card:nth-last-child(2), #credits .card:nth-last-child(2)
{
  margin:0 30px;
}


/* SECTION: ABOUT THE NAME */

#about #artiwaine_about_pic
{
  display:flex;
  background: url('https://www.artiwaine.com/img/artiwaine-about.jpg') no-repeat top center;
  background-size: cover;
  width:100%;
  min-height:400px;
  margin:0 auto;
}

#about #artiwaine_about_poem
{
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding:0!important;
}

#about #artiwaine_about_poem p
{
  justify-content: flex-start;
  width:95%;
  margin: 0 0 0 5%;
}

/* SECTION: PRIVACY POLICY; */



.t-center
{
  text-align: center!important;
}
#privacy-policy h2, #use-cookies h2
{
  margin:60px auto;
  color:#E8DB78!important;
}

/* === 9. FOOTER === */

#footer
{
  background: #171D25;
}

#footer .row {
    display: flex;
    width: 100%;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}
#footer .row p:last-child
{
  margin:0 auto!important;
  text-align: center!important;
}

/* === 9. NAVBAR MOBILE PANEL === */

.navbar-mobile-panel
{
  position: fixed;
  display: flex;
  flex-direction: column;
  left:0;
  width:100%;
  height: 100vh;

  background: rgba(0, 0, 0, .87);
  z-index: 199!important;

}

.navbar-mobile-panel ul
{
  width:100%;
  margin:0 auto;
  align-items: center;

}

.navbar-mobile-panel ul li
{
  width:100%;
  margin:0 auto;
  align-items: center;
  justify-content: center;
  border:0;
}

.navbar-mobile-panel ul li a
{
  width:100%;
  margin:0 auto;
  padding: 1.5rem 0;
  text-align: center;
  border:0;
  text-transform: uppercase;
}

.navbar-mobile-panel ul li a.active, .navbar-mobile-panel ul li a:hover, .navbar-mobile-panel ul li a.active:hover
{
border-radius:0;
background: #E8DB78;
color:#000!important;
}

.navbar-mobile-panel ul li a:hover
{
color:#E8DB78;
border:0!important;
border-radius: 0!important;
transition: all .2s ease;
}

.mobile-nav-is-sticky
{
  position: fixed;
  top:60px!important;
}

.mobile-nav-is-not-sticky
{
  position: absolute;
  top:600px!important; /* same value as #home > height */
}



.navbar-mobile-controls
{
  position: relative;
  display: flex!important;
  opacity: 1;
  transition: all .2s ease;
}

#btn-menu
{
  position: absolute;
  top:0;
  right:0;
  display: flex!important;
  align-items: center;
  justify-content: center;
  height:60px;
  width:48px;
  cursor:pointer;
  font-size: 1.5rem;

}

.closed
{
  color:#F9F1BA;
  transition: all .2s ease;
}

.opened
{
  color:#E8DB78;
}



.artiwaine {
    position:absolute;
    display: flex;
    bottom:-5px;
    left:50%;
    transform:translate(-60%);
    width:304px;
    height:530px;
    background:url("https://www.artiwaine.com/img/arti-waine-guitar-new.png") 100% center no-repeat;
    z-index:300!important;
    background-size:contain;
}




hr
{
  position:fixed;
  top:60px;
  left:0;
  border:0;
  background: red;
  height:1px;
  width:100%;
  z-index: 2000;
  margin:0;
  display:none;
}

.cookie-consent-container
{
  position: fixed;
  bottom:0;
  left:0;
  padding:3rem 0;
  background: rgba(0,0,0,.9);
  z-index: 999;
  color:#F9F1BA;
  flex-direction: row;
}

.close-consent
{
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background: #171D25;
  border:1px solid #E8DB78;
  padding:.5rem;
  text-transform: uppercase;
  cursor: pointer;
  color:#E8DB78;
  border-radius: 4px;
  width: auto;
  margin-left: .5rem;
}

.cookie-consent-container p
{
  font-size: 16px;
}


#footer a, #footer a:visited, .cookie-consent-container a, .cookie-consent-container a:visited, #loadtime
{
  color:#E8DB78;
}

.cookie-consent-container a, .cookie-consent-container a:visited, #loadtime
{
  font-weight: bold;
}

#loadtime
{
  margin-right:.25rem
}



.fixed-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url(https://www.dev.thomasfederico.com/artiwaine/regular/img/artiwaine-background.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  z-index: -10;
}


#contact-form
{
  flex-direction: column;
  margin:45px auto 0;
}
.form-area
{
  position: relative;
  margin-top:45px!important;

}

.form-area .card
{
  padding:0 1.25rem 2rem;
  margin: 0 auto!important;
}

.contact-form-row
{
  display: flex;
  width:100%;
  flex-direction: column;
  height:auto;
  margin:0 auto 0;
    box-shadow: 0 2px 5px #000;
}

.contact-form-row:first-child
{
  margin:0 auto;
}

.contact-form-col
{
  display: flex;
  flex-direction: column;
  height:auto;
  margin:0 auto;
}

.contact-form-col-left
{
  position: relative;
  width:100%;
  /*background: crimson;*/
  text-transform: uppercase;

}

.contact-form-col-right
{
  width:100%;
  /*background: green;*/
  flex-direction:column;
}

.contact-form-col-left
{
  flex-direction:row;
  border-bottom: 1px solid rgba(249, 241, 186, .2);
}

.step-arrow
{
  position: relative;
  margin:15px auto;
  width:100%;
  height:40px;
  cursor:default!important;
}


.step-arrow:after
{
  position: relative;
  width:20px;
  height:40px;
  margin:0 auto;
  content:"\f078";
  font-size: 1.2rem;
  line-height:40px;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
text-decoration: inherit;
  display: flex;
  justify-content:center;
  align-items: center;
  align-content: center;
}

.contact-form-col-left, .contact-form-col-right
{
  padding:20px;
}

.step-nb
{
  display: flex;
  flex-direction: column;
  text-align: center;

  width:27px!important;
  height:27px!important;

  align-items: center;
  justify-content: center;

  border:2px solid #E8DB78;;
  border-radius: 36px;
  color:#E8DB78;
}

.step-txt
{
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: center;
  text-align: left; /* only important for multiple lines */
  padding: 0 10px 0;
  color:#E8DB78;
}

.step-est
{
  text-transform: capitalize!important;
}

.step-row
{
  display:flex;
  flex-direction:row;
  width: 100%;
  /*background: red;*/
}

.step-row:nth-of-type(odd)
{
  margin:0 auto;
  /*background: crimson;*/
}

.step-row:nth-of-type(even)
{
  margin:20px auto 0;
}

.input-group-label
{
  display: flex;
  position: relative;
  flex-direction: column;
  width: 100%;
  margin:0 auto;
}

.input-groups
{
  display: flex;
  position: relative;
  flex-direction: row;
  width: 100%;
  margin:0 auto;
}


.input-group
{
  display: flex;
  flex-direction: column;
  width:100%;
  margin:0 auto;
  cursor:pointer!important;
  /*background: green;*/
}

.input-group-prepend, .input-group-append
{
  display: flex;
  flex-direction: row;

  margin:0 auto;
  /*background: crimson;*/
}

.input-group-prepend
{
  width:100%;
}

.input-group-append
{
  width:100%;
  margin:1rem 0;
}

.confirm
{
  display: flex;
  flex-direction: column;
  width:6%;
  max-width: 40px;
  margin:0 auto;
  background: crimson;
}

.input-group-email
{
  margin:0 auto .75rem ;
}


.input-group-append .input-group-text
{
  border:0!important;
  align-items: center;
  justify-content: flex-start;
}

form label
{
  display:flex;
  flex-direction:column;
  width: auto;
  margin: 0;
  width: 100%;
  /*background: red;*/
}

.label-txt
{
  color:#E8DB78;
}


form input, form select, form textarea
{
  position:relative;
  display: flex;
  flex-direction: column;
  width:100%;
  align-items: flex-start;
  margin:0 auto;
  border:2px solid #F9F1BA;
  background: #181818;
  color:#F9F1BA!important;
  cursor: pointer!important;
}

form input, form select
{
  padding:10px;
  border-radius:5px;
}


.input-group-text
{
  display: flex;
  width: 50%;
  justify-content: flex-start;
  font-size: 1rem;
  color:#F9F1BA;
  z-index: 200;
  border:0!important;
  background: none;
  padding:0;
}

.input-group-prepend
{
  width:100%;
}


.input-group-prepend label
{

  width:100%;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
}


 .input-group-prepend label i {
   display: flex;
   width:27px;
   height:27px;
   flex-direction:column;
    align-content:center;
    justify-content: center;
    font-size: .75rem;
}

.fa-lock, .fa-info-circle
{
  color: #25AE88;
  border:0!important;

}


.c-select {
  position: relative;
  margin: 0;
  padding:0;
  width: 100%;
}

.c-select select
{
  position: relative;
  width:100%;
  -moz-appearance:caret;
  -webkit-appearance: caret;
  outline: none;
  background: red!important;
}




form input:required, form textarea:required, form select {
    box-shadow:none;
    /*border: 2px solid rgba(255, 200, 118, 1);*/
}



form input:required:valid, form textarea:required:valid, form select:required:valid
{
  border: 2px solid rgba(60, 200, 118, 1);
}


form input:required, form textarea:required, form select
{
  box-shadow:none;
}

form input:required:invalid, form textarea:required:invalid, form select:required:invalid
{
    outline: none!important;
}

form input:last-of-type
{
  margin-right: 0;
}

.n-validation
{
  padding:0!important;
}

.n-validation span
{
  padding:0 0 0 5px;
}

#contact-form .check-box-phone label {
    position:relative;
    cursor:pointer;
        height:51px;
        width:100%;
        padding:0;
        margin:0;


}
#contact-form .check-box-phone label [type="radio"] {
    display:none;
}
#contact-form .check-box [type="radio"] + span {
    display:flex;
    flex-direction: row;
    align-items: center;
    width:100%;
    height:51px;
    padding:0 1rem;
    margin:0 auto;
    color:rgba(93,92,101, 1);
    border-radius: 3px;
    transition:all .2s ease;
    flex:1;
      justify-content: center;

  background: #F9F1BA;
    border: 2px solid #F9F1BA;


}
#contact-form .check-box-phone :checked + span {
  display:flex;
  width:100%;
  margin:0 auto;
  color:#fff;
  border: 2px solid rgba(60, 200, 118, 1)!important;
  background:rgba(60, 200, 118, 1);
}

#contact-form .check-box-phone :checked + span i {
  color:#fff;
}



.check-box-phone
{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin:0!important;
  padding:0!important;
  width: 12.5%;
  height:51px;
}

.check-box-phone span
{
  display: flex;
  align-items: flex-end;
  width:35%;
  margin:0 auto!important;
  padding:0 5%!important;
  text-transform: capitalize;
}

.check-box-phone input
{
  display: flex;
  align-items: flex-end;
  width:25%;
  margin:0 auto!important;
  padding:0!important;
}

.check-box label
{
}


.check-box :checked + span {
  display:flex;
  width:100%;
  margin:0 auto;
  color:#fff;
  border: 2px solid rgba(60, 200, 118, 1);
  background:rgba(60, 200, 118, 1);

}


.input-group-subject .input-group-append
{
  flex:1;
}



#contact-form .check-box
{
  width:100%;
  margin-right: 30px!important;
}

#contact-form .check-box:last-child
{
  margin-right:0!important;
}



#contact-form .check-box-sub label {
    position:relative;
    cursor:pointer;
        height:47px;
        width:100%;
        padding:0;
        margin:0;


}
#contact-form .check-box-sub label [type="radio"] {
    display:none;
}
#contact-form .check-box-sub [type="radio"] + span {
    display:flex;
    flex-direction: row;
    align-items: center;
    width:100%;
    height:47px;
    padding:0 1rem;
    margin:0 auto;
    color:rgba(93,92,101, 1);
    border-radius: 3px;
    transition:all .2s ease;
    flex:1;
    justify-content: center;
}


#contact-form .check-box-sub :checked + span {
  display:flex;
  width:100%;
  margin:0 auto;
  color:#fff;
  border: 2px solid rgba(60, 200, 118, 1)!important;
  background:rgba(60, 200, 118, 1)!important;

}

#contact-form .check-box-sub :checked + span i {
  color:#fff;
}

.intl-tel-input
{
  display: flex!important;
  width:100%;
  margin:0 auto;
}

.intl-tel-input.allow-dropdown input, .intl-tel-input.allow-dropdown input[type="text"], .intl-tel-input.allow-dropdown input[type="tel"], .intl-tel-input.separate-dial-code input, .intl-tel-input.separate-dial-code input[type="text"], .intl-tel-input.separate-dial-code input[type="tel"]
{
    padding-right: 6px;
    padding-left: 80px;
    margin-left: 0;
}


.selected-flag
{
  border-right-width:2px;
  border-right-style: solid;
  border-right-color:#F9F1BA!important;
  padding:0 1rem!important;
}

.selected-flag-valid
{
  border-right:2px solid rgba(60, 200, 118, 1) !important;
}


.selected-flag-invalid
{
  border-right:2px solid rgb(220,20,60) !important;
}

.iti-flag
{
  box-shadow:none!important;
  background-color: #171D25 !important;
}

.intl-tel-input .country-list
{
  background: pink!important;
  border: 2px solid #F9F1BA !important;
  background: #171D25 !important;
  color: #F9F1BA !important;
  border-radius: 0 0 5px 5px;
  z-index: 3000!important;
  margin:-3px 0 0 -1px!important;
  overflow-x: hidden;
}


.allow-dropdown-open
{
  border-radius: 5px 5px 0 0!important;
}


.intl-tel-input .country-list .active
{
  border-bottom:0!important;
  background: rgb(60, 200, 118)!important;
  color:#fff !important;
  border:0!important;
}

.intl-tel-input .country-list .country.active .dial-code
{
  color:#fff!important;
}

.intl-tel-input .country-list .active:hover, .intl-tel-input .country:hover, .intl-tel-input .country:hover .dial-code, .intl-tel-input .country-list .country.active:hover .dial-code
{
  color:#171D25 !important;
}

.intl-tel-input .country-list .active:hover, .intl-tel-input .country:hover
{
  background: #E8DB78!important;
}




.intl-tel-input .selected-flag .iti-arrow.up
{
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 4px solid #F9F1BA;
}

.intl-tel-input .selected-flag .iti-arrow
{
  border-left: 3px solid transparent;
border-right: 3px solid transparent;
  border-top: 4px solid #F9F1BA;
}



.check-box-sub
{
  display: flex;
  flex-direction: row;
  align-items: center;
  margin:0!important;
  padding:0!important;
  width: 12.5%;
  height:51px;
}

.check-box-sub span
{
  display: flex;
  align-items: flex-end;
  width:35%;
  margin:0 auto!important;
  padding:0 5%!important;
  text-transform: capitalize;
}

.check-box-sub input
{
  display: flex;
  align-items: flex-end;
  width:25%;
  margin:0 auto!important;
  padding:0!important;
}




form input, form textarea
{
  border-radius: 5px;
}

*:focus {
  border-color: inherit;
-webkit-box-shadow: none!important;
box-shadow: none!important;
outline:0!important;
}

#msgWrapper
{
  position: relative;
  overflow: hidden;
}


form textarea
{
  overflow: hidden;
  padding:10px;
  margin: 0;
}

#msgWrapper, form textarea
{
    /*height:38vw;*/
    min-height:230px;
}

#form-controls
{
  margin-top:.75rem!important;
}

#charcount, #msg_length_notification
{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color:#fff!important;
  margin:0 30px 0 0;
  padding:0;
  z-index:20;
  border:2px solid rgba(62, 62, 62, 1);
  border-radius: 5px;
}

#charcount
{
  display: flex;
  border: 2px solid rgba(60, 200, 118, 1);
  flex-direction: row;
  align-items: center;
  justify-content: center;
}


#charcount_value
{
  width:100px;
  background: #323a4e;
  border-radius:0 3px 3px 0;
}

#charcount_text
{
  width:160px;
}
#charcount_value, #charcount_text
{
  flex-direction: column;
  align-items: center;
  align-content: center;
  height:47px;
  padding:10px;
}


#btn-controls
{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

#btn-controls button
{
  display: flex;
  background: pink;
  align-items: center;
  justify-content: center;
  width: 100%;
  height:51px;
  border:0;
  margin-right:30px;
  padding:10px;
  color:#fff;
  border-radius: 5px;
  border:2px solid rgba(0,0,0,.4);
  text-transform: uppercase;
}

#btn-controls #btn_send
{
  background: #008B8B;
}

#btn-controls #btn_reset
{
  margin-right: 0;
  background: crimson;
  border:2px solid #800000;
}

.validate
{
  width:100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
  height:auto;
  overflow:hidden;
  overflow-wrap: break-word!important;
  word-wrap: break-word!important;
  word-break: break-all;
  hyphens: auto;
  white-space: pre-wrap;
  /*background: crimson;*/
}


.validation
{
  display: flex;
  align-items: center;
  flex-direction: row;
  /*background: pink;*/
  width:auto;
  padding-left:.25rem;
}

.valid_adr
{
  color: rgb(60, 200, 118)!important;
}

.invalid_adr
{
  color: crimson!important;
}

.valid_bdr
{
  position: relative;
  color:rgb(60, 200, 118)!important;
  border:solid rgb(60, 200, 118)!important;
  border-top-width:2px!important;
  border-left-width:2px!important;
  border-bottom-width:2px!important;
  border-right-width:2px!important;
  transition: all .2s ease;
}

.valid_bdr_btm
{
  border-bottom:1px solid rgb(60, 200, 118)!important;
  transition: all .2s ease;
}

.invalid_bdr_btm
{
  border-bottom:1px solid crimson!important;
  transition: all .2s ease;
}

.invalid_bdr
{
  color:crimson!important;
  border:2px solid crimson!important;
  transition: all .2s ease;
}

input:disabled .empty
{
  color:rgba(93,92,101, .5)!important;
}



/* CONTACT FORM STEPS */

.lock-step
{
  opacity: .25!important;
  cursor:not-allowed!important;
  transition: all .2s ease;
}

.unlocked-step
{
  opacity: 1!important;
  cursor:pointer!important;
  transition: all .2s ease;
}


/* === 10. MODALS === */


  /* The Modal (background) */
  /* The Modal (background) */
  .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 9999; /* Sit on top */
    /*padding-top: 80px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
  }

    .modal-content {
    -webkit-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);
    top: 50%;
    margin: 0 auto;
}

  /* Modal Content */
  .modal-content {
    position: relative;
    display:flex;
    background: #171D25;
    margin: auto;
    padding: 0;
    max-width:900px;
    width:90%;
    border-radius:7px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  }

  .modal-header
  {
    position: relative;
    display:flex;
    flex-direction:row;
    padding:0;
    color: #E8DB78;
    border-radius:6px 6px 0 0;
  }

  .modal-body h2
  {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align: center;
    width:96%;
    padding:16px 0 16px 6%;
    margin:0 auto;
  }

  .modal-header-img
  {
    border-radius: 7px 7px 0 0;
    width:100%;
  }



  .modal-body {display:flex; flex-direction:column; padding: 2px 16px;}
  .modal-body p {
    width:100%;
    text-align: center!important;
  }

  .modal-footer {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding: 2px 16px;
    color: white;
    border-radius:0 0 7px 7px;
    padding:1rem;
  }

  .modal-header,
  .modal-footer
  {
    border:0;
  }

  /* The Close Button */


  .btn-close
  {
    position: absolute;
    top:0;
    right:0;
    z-index: 200;
    border-radius: 0 7px 0 7px;
    -webkit-box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.9);
    -moz-box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.9);
    box-shadow: -2px 2px 5px 0px rgba(0,0,0,0.9);
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
  }

  .close {
    width: auto;
    margin: 1rem auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    font-weight: bold;
    padding: 1rem!important;
    border-radius: 28px;
    text-transform: uppercase;
    opacity: 1;
    text-shadow: none;
    transition: all .2s ease;
}
.close:hover,
.close:focus {
  color: white;
  text-decoration: none;
  opacity: 1;
}

  .btn-close:hover,
  .close:hover
  {
    cursor: pointer;
  }

  .fa-spinner
  {
    margin-left:10px;
  }

  .bg-success
  {
    background: #25AE88!important;
  }

  .bg-fail
  {
    background: rgba(235, 90, 115, 1)!important;
  }

  .modal-footer .bg-fail
  {
    background: rgba(235, 90, 115, 1)!important;
    border:2px solid #954F58!important;
  }

  .modal-footer .bg-fail:hover
  {
    background: rgba(235, 90, 115, .8)!important;
  }

  .modal-footer .bg-success
  {
    background: rgba(37, 174, 136, 1)!important;
    border:2px solid #39856E!important;
  }

  .modal-footer .bg-success:hover
  {
    background: rgba(37, 174, 136, 0.8)!important;
  }

  .fail
  {
    color:#EB5A73;
  }

  .success
  {
    color:#25AE88;
  }

  .val-res
  {
    align-items: center;
    width:75%;
    padding-left: .25rem;
  }


  .valid_bdr:disabled, .invalid_bdr:disabled
  {
    border:2px solid #ced4da!important;
  }

  .invalid_bdr:disabled
  {
    color:rgba(220,20,60, .5)!important;
  }


  .valid_bdr:disabled
  {
    color:rgba(60, 200, 118, .5)!important;
  }


  .iti-flag {background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/15.0.2/img/flags.png");}



  /* === 11. MEDIA QUERIES === */


  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .iti-flag {background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/15.0.2/img/flags@2x.png");}
  }




@media screen and (min-width:965px)
{
  .navbar-mobile-controls, .navbar-mobile-panel
  {
    display:none!important;
    opacity: 0;

  }
}

@media screen and(max-width:1042px)
{

}

@media screen and(max-width:964px)
{
  .navbar-mobile-panel
  {
    display:flex;
    flex-direction: column;
    width:100%;

    margin: 0 auto;
  }


  #navbar ul li a:hover
  {
    border-bottom:0!important;
  }

}

@media screen and (max-width:898px)
{

  #contact .card-group:first-child .card:nth-last-child(2)
  {
    margin:0 15px;
  }
}

@media screen and (max-width:867px)
{
  #contact .card-group:first-child .card:nth-last-child(2)
  {
    margin:0 0 0 30px;
  }

  #contact .row-content:first-child .card-group:first-child
  {
    margin:0 auto!important;
  }

  #contact .row-cta
  {
    margin:0 auto 30px!important;
  }

  #contact .row-cta .card-group:first-child
  {
    margin:0 auto 30px!important;
  }

  #contact .row-cta .card-group:first-child .card:last-child
  {
    margin:60px auto 0!important;
  }

}


@media screen and (max-width:767px)
{
  .artiwaine
  {
    display:none;
  }
  #about #artiwaine_about_pic
  {
    margin-bottom: 30px;
  }

  #home
  {
    height:400px!important;
  }

  .mobile-nav-is-not-sticky
  {
    top:460px!important;
  }

  #home > .intro-container
  {
    top:50%!important;
  }

}



@media screen and (max-width:608px)
{
  .cookie-consent-container, .consent-message
  {
    flex-direction: column;
  }

  .consent-message p
  {
    text-align: center!important;
    font-size: 14px;
  }

  .close-consent
  {
    width:86%;
    margin:2rem auto 1rem;
  }

}

@media screen and (min-width:576px) and (max-width:760px)
{
  #credits .card, #credits .card:nth-last-child(2)
  {
    margin:0!important
  }

  #credits .card-group:first-child .card:first-child {
    margin:0 30px 0 0!important;
}
}


@media screen and (min-width:575px) and (max-width:699px)
{
  .card a.btn
  {
    font-size: 2vw!important;
  }
}


@media screen and (max-width:575px)
{

  h1 {
    height:auto;
    padding:3rem 1rem;
  }
  .section-bg
  {
    padding:0 0 20px;
  }

  .card:first-child, .card, .card:last-child
  {
    margin:0 auto 30px!important;
  }

  .card-group
  {
    margin: 0 auto!important;
  }

  .card-group .card  {
    margin:60px auto 30px!important;
  }

  .card-group:first-child .card:first-child
  {
    margin: 30px auto 0!important;
  }


  #services .card-group .card  {
    margin:30px auto 0!important;
  }

  .card-header
  {
    height:23vw;
  }


  .cookie-consent-container
  {
    padding:1rem;
  }

  .caption
  {
    padding:0 2rem!important;
  }

  .contact-form-row
  {
    box-shadow: none!important;
  }

  .contact-form-col-left
  {
    border-bottom: 0!important;
  }

  .form-area .card{
    padding:0!important;
  }

  #msgWrapper .input-group-append
  {
    margin:1rem auto 0!important;
  }
  #form-controls
  {
    margin-top: 10px!important;
  }

  .contact-form-col-left, .contact-form-col-right
  {
    padding:0 20px 20px;
  }

   .contact-form-col-right
  {
    border-bottom:1px solid rgba(249, 241, 186, .2);
    margin-bottom: 1.5rem;
  }

  .step-arrow
  {
    display: none;
  }

  .contact-form-row:last-of-type .contact-form-col-right
  {
    border:0;
    margin-bottom: 0;
  }

  .input-group-email

  {
    margin:0 auto;
  }

  #msgWrapper, form textarea
  {
    min-height:130px;
  }

  .step-row:nth-of-type(2n)
  {
    margin:10px auto 0;
  }

  #row-subject .input-group-append
  {
    margin:1rem auto 0!important;
  }

  #row-phone .check-box, #row-subject .check-box:last-child
  {
    margin-bottom: 1rem!important;
  }


}

@media screen and (max-width:669px)
{
  #row-phone .input-group-append, #row-subject .input-group-append
  {
    flex-direction: column;
  }

  #row-phone .check-box, #row-subject .check-box
  {
    margin-bottom: 1.5rem!important;
  }
}


@media screen and (max-width:661px)
{

  #form-controls, .contact-form-row
  {
    flex-direction: column;
    margin-top:0!important;
  }

  #form-controls
  {
    margin-top:30px!important;
  }

  #msgWrapper
  {
    margin-top:0;
  }

  #user_name, #user_phone, #user_email, select, #textarea
  {
    margin: 0!important;
  }

  .intl-tel-input .flag-container
  {
    height:47px;
    padding:2px!important;
  }



  #charcount {

    width:100%;
    margin-bottom: 30px;
  }

  #charcount_text
  {
    width:70%;
  }

  #charcount_value
  {
    width:30%;
    align-items: flex-end;
  }

  #btn-controls
  {
    width:100%;

  }

  .intl-tel-input .country-list
  {
    margin:-3px 0 0 -2px!important;
  }


}



@media screen and (max-width:395px)
{
  .intro-container > .tagline
  {
    font-size: 6vw
  }

  #home
  {
    height:300px!important;
  }

  .mobile-nav-is-not-sticky
  {
    top:360px!important;
  }

}

@media screen and (max-width:381px)
{

  #charcount_value
  {
    max-width:100px;
  }

  #charcount_text
  {
    max-width:160px;
  }

  #charcount_text, #charcount_value
  {
    width:100%!important;
    text-align:center;
    margin:0 auto;
  }

  .btn-close
  {
    width:48px;
    height:48px;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
  }

  .btn-close svg
  {
    display: flex;
    flex-direction: column;
    width:100%;
    height:100%;
  }
}

.warning
{
  flex-direction: column;
  padding:.5rem 1rem 1rem;
  overflow: hidden;
}

.warning p
{
  width:100%;
  display: flex;
  text-align: left!important;
  font-size: 1rem;
  overflow:hidden;
  overflow-wrap: break-word!important;
  word-wrap: break-word!important;
  word-break: break-all;
  hyphens: auto;
  white-space: pre-wrap;
}

.warning p .fas
{
  font-size: .75rem;
  margin:.4rem .5rem 0 0;
}

.Rtable-container
{
  margin:60px auto 0;
  flex-direction: column;
  border-radius: 8px;
  border-right:1px solid rgba(249, 241, 186, .2);
  border-bottom:1px solid rgba(249, 241, 186, .2);

}

.Rtable-parent
{
  flex-direction: row;
}

.Rtable-parent-header
{
  flex-direction: row;
}

.Rtable-col
{
  flex-direction: column;

}

.Rtable-cell:nth-child(odd)
{
  background: #171D25;
}

.Rtable-col .Rtable-header
{
  align-content: center;
  align-items: center;
  justify-content: center;
  padding:1rem 0;
  border-top:1px solid rgba(249, 241, 186, .2);
  text-transform: capitalize;
  background: #171D25;
  font-size: 1em !important;
  color: #E8DB78 !important;
  text-transform: uppercase;
  font-weight: 500;
}

.Rtable-col .Rtable-header-extended
{

}

.Rtable-col:first-child .Rtable-header
{
  border-top:1px solid rgba(249, 241, 186, .2);
  border-left:1px solid rgba(249, 241, 186, .2);
  border-radius: 8px 0 0 0!important;
}

.Rtable-col:nth-last-child(2) .Rtable-header
{
  border-top:1px solid rgba(249, 241, 186, .2);
  border-left:1px solid rgba(249, 241, 186, .2);
  border-radius:0;
}

.Rtable-col:last-child .Rtable-header
{
  border-top:1px solid rgba(249, 241, 186, .2);
  border-right: 0;
  border-left:1px solid rgba(249, 241, 186, .2);
  border-radius: 0 8px 0 0;
}


.Rtable-cell
{
  padding:1rem;
  border-top:1px solid rgba(249, 241, 186, .2);
  border-left:1px solid rgba(249, 241, 186, .2);
  flex-direction: column;
}

.Rtable-cell:first-child
{
  border-top:0;
}

.Rtable-col:first-child .Rtable-cell:last-child
{
  border-radius: 0 0 0 8px;
}

.Rtable-col:last-child .Rtable-cell:last-child
{
  border-radius: 0 0 8px 0;
}

.margin-bot-60
{
  margin-bottom: 60px;
}

@media screen and (max-width:575px)
{
  .Rtable-parent
  {
    flex-direction: column;
  }

  .Rtable-col:first-child .Rtable-cell:last-child
  {
    border-radius: 0;
  }

  .Rtable-col:first-child .Rtable-header
  {
    border-radius: 8px 8px 0 0!important;
  }

  .Rtable-col:last-child .Rtable-cell:last-child
  {
    border-radius: 0 0 8px 8px;
  }

  .Rtable-col:last-child .Rtable-header
  {
    border-radius: 0;
  }
}