html,        
body {
    font-family: 'Lato', 'Arial', sans-serif;
    font-weight: 300;
    font-size: 20px;
    color: #a6c1d8;
    text-shadow: 1px 1px #000;
    background: #3c3b3b;
    margin: auto;
    text-rendering: optimizeLegibility;
}



/* ----- HEADER ----- */

header {
    background: linear-gradient(rgba(0, 0, 0, 0.31), rgba(0, 0, 0, 0));
    background-image: url("imgs/joseph_min.jpg");
    -webkit-background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    height: 100vh;
    width: 100%;
}
    
    /*background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url(JOSEPH_CABEÇALHO.jpg);
    background-repeat:no-repeat;
    background-position: center;
    background-attachment: fixed;
    height: 100vh;
    background-size: 100%;*/
    

-webkit-box-sizing: border-box; /*Not necessary in this situation
  display: block; /*Not necessary, but we do want it this way*/
  -webkit-width: 100vw;  /*Not necessary, but we do want it this way*/
  -webkit-height: 100vh; /*Necessary.  100vh = 100% of the viewport height*/
  padding: 0; /* No padding */
  margin: 0; /* No margins */
  -webkit-background: url("imgs/joseph.jpg") no-repeat center center;  
  /* Shorthand: image, repeat, X align, Y align. */
  -webkit-background-size: cover; /* Cover all available space*/
    
}

.row {
    -webkit-max-width: 1140px;
    -webkit-margin: 0 auto;
}



/* ----- PICTURES ----- */

.first-pic {
    height: 100px;
    max-width: 100%;
    margin: 0;
}

.desenho-1 {
    width: 90%;
    height: auto;
    display: block;
    margin-left: auto;
    opacity: 0.5;
    border-radius: 25px;
    transition: opacity 0.2s, color 0.2s;
    width: 100%;
}

.desenho-1:hover {
    width: 90%;
    height: auto;
    display: block;
    margin-left: auto;
    opacity: 0.9;
    border-radius: 25px;
    transition: opacity 0.2s, color 0.2s;
    width: 100%;
}

.desenhos {
    width: 90%;
    height: auto;
    display: block;
    text-align: justify;
    width: 100%;
}

.produtos {
    height: auto;
    display: block;
    text-align: center;
    margin-bottom: 5%;
}

.iluria {
    width: 400px;
    height: 400px;
    border-radius: 8px;

}

.produtos a:active
.produtos a:hover
.produtos a:visited
.produtos a:link {
    border-bottom: none;
}

/*.produtos img:hover {
    opacity: 0.7;
    width: 15%;
    height: auto;
    transform: scale(1.15);
    transition: transform 0.5s; opacity: 0.5s;
}*/

.figure-desenhos img:hover {
    color: rgba(0, 0, 0, 0.51);
    width: 100%;
}



/* ----- SECTIONS ----- */

section {
    padding: 10px 0;
}

.section-desenhos {
    background-image: linear-gradient(rgba(52, 51, 51, 0.67), rgba(31, 31, 31, 0.68)), url(imgs/19488869_1723571274333473_1627030119393696225_o.jpg);
    background-attachment: fixed;
    height: 100vh;
}

.artista {
    background-color: #464646;
    margin-top: 10px;
    text-align: center;
}

.how-to-help, /*{
    background-image: linear-gradient(rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.63)), url(29745060_352973228524345_2157900401115414003_o.jpg);
    background-attachment: fixed;
    background-position: center;
    height: 100vh;
}*/

.loja-online {
        background-color: #464646;
        width: 100%;
}



/* ----- HEADINGS ----- */

h1 { 
    margin-top: 0;
    margin-bottom: 5%;
    font-size: 250%;
    text-align: center;
    color: #fff;
    letter-spacing: 1px;
    text-shadow: 4px 4px #000;
}

h2 {
    font-size: 115%;
    text-align: center;
    color: #000000;
    font-weight: 300;
    font-style: italic;
    text-shadow: 2px 2px #fff;
    text-transform: uppercase;
}

.h3s {
    font-size: 150%;
    text-align: center;
    color: rgb(165, 217, 240);
    text-transform: uppercase;
    text-shadow: 2px 2px #312626;
}

.standard {
    font-size: 90%;
    text-align: justify;
    margin-bottom: 5%;
    margin-left: 15%;
    width: 70%;
    line-height: 145%;
    color: #ffffff;
}

.joseph-text-box {
    position: absolute;
    width: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 2;
    letter-spacing: 2px;
}


.author-text,
#artista-text {
    font-size: 85%;
    color: #bcbcbc;
    text-shadow: 1px 1px #000;
    padding-left: 20px;
    text-align: center;
    margin-bottom: 3%;
}

.artista img {
    border-radius: 8px;
    height: 100px;
    width: 100px;
    text-align: center;
}

.artista img:hover {
    border-radius: 8px;
    height: 100px;
    width: 100px;
    text-align: center;
    color: rgba(0, 0, 0, 0.51);
    opacity: 0.5;
    transition: opacity 0.2s, color 0.2s;
}

#author-link {
    border-bottom: none;
}


.nossos-desenhos {
    color: #fff;
    text-shadow: 1px 1px #000;
}

/* ------------------------------------ */
/* FORM */
/* ------------------------------------ */

.contact-form {
    width: 85%;
    margin-left: auto;
}

input[type=text],
input[type=email],
input[type=message],
textarea {
    width: 80%;
    padding: 12px 12px;
    border-radius: 12px;
    border: 2px solid #fff;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    font-size: 14px;
}

input[type=text]:focus,
input[type=email]:focus,
input[type=message]:focus,
textarea:focus {
    border: 3px solid #4b84b5;
    outline: 0 none;
}

textarea {
    height: 100px;
}

label {
    font-weight: 300;
    background-color: rgba(0, 0, 0, 0.38);
    border-radius: 8px;
}



input[type=submit] {
    background-color: #a6c1d8;
    color: #242424;
    border: #3c3b3b;
    font-size: 14px;
    text-shadow: #4b84b5 1px 1px;
    padding: 10px 24px;
    border-radius: 8px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #6999c3;
    color: #242424;
    opacity: 0.6;
    transition: color 0.2s, opacity 0.2s, color 0.2s;
}



/* ----- ICONS ----- */

ion-icon {
    display: inline-block;
    width: 30px;
    height: 18px;
    color: #a6c1d8;
    text-shadow: 2px 2px #000;
    font-size: 20px;
    padding: 0px;
}



/* ----- LINKS ----- */

.social-links li  {
    list-style: none;
    text-decoration: none;
    color: #888;
    transition: color 0.2s;
    line-height: 2;
}

.social-links {
    text-align: center;
    padding: 0px;
    line-height: 2;
}

li {
    list-style: none;
}

a:link,
a:visited {
    list-style: none;
    color: #bfb7b7;
    text-decoration: none;
    padding-bottom: 1px;
    border-bottom: 2px solid #bfb7b7;
    transition: border-bottom 0.2s, color 0.2s;
    text-align: justify;
    width: 30px;
    }

a:hover,
a:active {
    color: #555;
    border-bottom: 1px solid transparent;
    }

.btn-desenho:hover {
    color: rgba(0, 0, 0, 0.52);
    transition: opacity 0.2s, color 0.2s;
    opacity: 0.5;
    height: 400px;
    width: 400px;
}

#EHC,
#CC {
    border-radius: 8px;
}

.btn-desenho:link {
    border-bottom: transparent;
}


/* ----- FOOTER ----- */
        
footer {
    padding: 20px;
    text-align: center;
    font-size: 80%; 
    background: rgba(3, 0, 0, 0.38);
}

footer p {
    font-size: 90%;
    text-align: center;
    margin-top: 20px;
    color: #ffffff;
}