/* Regole universali */

body {
    margin: 0;
    padding: 0;
    background-color: #58f09c;
}

* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

/* Classi speciali */

.jolly_center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

/* Colori */

.red {
    color: #ff4257;
}

.white {
    color: white;
}

.obsidian {
    color : #293133;
}

.blue {
    color: #5c9edd;
}

/* Font

font-family: 'Open Sans Condensed', sans-serif;
font-family: 'Oswald', sans-serif;

 */

.font_title_section {
    font-family: 'Oswald', sans-serif;
    text-align: left;
    font-size: 3em;
    font-weight: 500;
}

.font_body_section {
    font-family: 'Open Sans Condensed', sans-serif;
    text-align: left;
    font-size: 1.5em;    
    line-height: 1.1;
}

.font_body_section_important {
    font-family: 'Oswald', sans-serif;
    text-align: left;
    font-size: 1.6em;
    text-transform: uppercase;
}

.font_subtitle {
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: 300;
}

.font_info {
    float: right;
    color: white;
    font-size: 2em;
}

.font_sub_btn {
    font-family: 'Oswald', sans-serif;
    text-align: left;
    font-weight: 500;
    font-size: 1.2em;
}

/* Landing */

.main {
    width: 1344px;
    margin: 0 auto;
}


#introduction_and_goals_field {
    background-color: #293133;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

#introduction_and_goals {
    text-align: left;
    padding: 60px 60px;  
}

#introduction_and_goals p:nth-of-type(1) {
    margin-top: 15px;
}

#title_my_skils {
    padding: 20px 60px 0;
}

#skills_field {
    width: 1344px;
    margin: 0 auto;
    overflow: hidden;
}

.skill_label {
    float: left;
    background-color: #293133;
    border: 2px solid white;
    width: 400px;
    height: 140px;
    margin: 0 22px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    color: white;
    transition: 1.5s ease-out;
    margin-top: 20px;
    cursor: default;
}

.skill_label p, fa {
    text-align: center;
}

.skill_label p.font_body_section_important {
    font-size: 2em;
}

.fa {
    color: white;
    text-align: center;
    font-size: 1.6em;
    margin: 0 3px;
}

.skill_label .font_body_section {
    padding: 0 4px;
    display: none;
}

.skill_label:last-child {
    margin-bottom: 45px;
}

/* Il gioco di hover sui form di label */

.skill_label:hover {
    background-color: white;
    color: #293133;
    border: 2px solid #293133;
    transition: 1.5s ease-in-out;
}

.skill_label:hover p {
    display: none;
}

.skill_label:hover .font_body_section {
    display: block;
}

/* Portfolio e esperienze */

#portfolio_experiences_field  {
    background-color: white;
    overflow: hidden;
    box-shadow: 0 -10px 20px rgba(0,0,0,0.19), 0 -6px 6px rgba(0,0,0,0.23), 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    min-height: 710px;
    padding-bottom: 40px;
    margin-bottom: 20px;
}

#portfolio_experiences {
    padding: 60px 60px;
    overflow: hidden;
}

#portfolio_experiences hr {
    margin-bottom: 20px;
}

.switcher {
    width: 370px;
    margin-top: 20px;
    margin-right: 30px;
    transition: 1.5s ease-in;
    float: left;
    cursor: pointer;
}

.switcher .font_title_section {
    text-transform: uppercase;
    font-size: 2em;
    text-align: center;
    padding: 10px 0;
}

#graphiccheck {
    border: 2px solid #ff4257;
    border-bottom: 8px;
    border-bottom-color: #ff4257;
    border-bottom-style: solid;
    transition: 0.7s ease-in;
}

#web_check {
    border: 2px solid #5c9edd;
    border-bottom: 8px;
    border-bottom-color: #5c9edd;
    border-bottom-style: solid;
    transition: 0.7s ease-in;
}

/* I frame del portfolio */

#portfolio_list {
    margin: 0 auto;
    width: 1344px;
}

.frame {
    width: 620px;
    margin: 20px 20px;
    height: 180px;
    float: left;;
    position: relative;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    overflow: hidden;
    transition: 1s ease-in;
}

.frame_explanation {
    position: absolute;
    bottom: 0;
    margin-bottom: 20px;
    margin-left: 40px;
    margin-right: 30px;
}

.frame .font_body_section, .font_title_section {
    text-align: left;
}

.frame .font_title_section {
    font-size: 2.6em;
    text-align: left;
}

.graphic, .web {
    display: none;
}

.graphic {
    border: 2px solid #ff4257;
    border-top-right-radius: 50px;
}

.web {
    border: 2px solid #5c9edd;
    border-top-left-radius: 50px;
}

.show {
    display: block;
}

.animation_base_graphic {
    color: #ff4257;
    background: linear-gradient(to top, #ff4257 50%, white 50%);
    background-size: 100% 200%;
    background-position: left top;
}

#graphiccheck:hover, .animation_active_graphic {
    color: white;
    background-position: right bottom;
}

.animation_base_web {
    color: #5c9edd;
    background: linear-gradient(to top, #5c9edd 50%, white 50%);
    background-size: 100% 200%;
    background-position: left top;
}

#web_check:hover, .animation_active_web {
    color: white;
    background-position: right bottom;
}

#form_mail {
    padding: 40px 60px 60px;
}

#form_mail .fa-hand-o-left {
    color: #293133;
    font-size: 1em;
}

#form_mail hr {
    border-top: 1px solid #293133;
    border-bottom: 0 solid #293133;
    margin-bottom: 20px;
}

#form_mail .font_body_section span {
    font-size: 1.2em;
    font-weight: 600;
}

#form_mail h1 a {
    transition: 1s ease-in;
}

#form_mail h1 a:hover {
    color: white;
    transition: 1s ease-in;
}

#no_cookies_field {
    background: #5c9edd;
}

#no_cookies h1 {
    text-align: right;
}

#no_cookies .font_body_section {
    text-align: right;
}

#no_cookies {
    padding: 60px 60px;
}

#no_cookies hr {
    border-top: 1px solid #293133;
    border-bottom: 0 solid #293133;
    margin-bottom: 20px;
}

/* Go up */

#go_up {
    position: fixed;
    bottom: 40px;
    right: 60px;
    visibility: hidden;
}

#go_up .fa-arrow-circle-up {
    font-size: 2.5em;
    color: #E3AB5D;
}

/* Footer */

footer {
    background-color: #293133;
    text-align: center;
    min-height: 80px;
    overflow: hidden;
}

footer .fa {
    font-size: 1em;
    font-weight: 300;
}

#menu_bottom {
    float: left;
    padding: 60px 70px;
}

#menu_bottom a {
    transition: 1s ease-out;
}

#menu_bottom a:hover {
    color: #ff4257;
    transition: 1s ease-out;
}

#menu_bottom .font_title_section {
    font-size: 1.9em;
}

#designed_bottom {
    padding: 60px 70px;
    float: right;
}

.label_more {
    height: 630px !important;
    transition: 1s ease-in;
}

.hide {
    display: none;
}

.label_more_content {
    padding: 20px 40px;
    display: none;
}

.mostrare {
    display: block;
}

.label_more_content .font_title_section {
    font-size: 2rem;
}

.less_label {
    text-transform: uppercase;
    cursor: pointer;
}

.label_more_content ul {
    margin-top: 20px;
}

.bigger {
    font-weight: 700;
}

.font_body_section .more_btn {
    font-size: 0.8em;
    cursor: pointer;
}

.frame .fa-angle-right {
    color: #293133;
    font-size: 1.5rem;
}

/* Il meraviglioso mondo del responsive */

@media screen and (max-width: 1556px) {
    .main {
        width: 100%;
    }
    #go_up {
        right: 20px;
    }
}

/* Calibrazione padding section */

@media screen and (max-width: 790px) {
    #introduction_and_goals {
        padding: 60px 45px;
    }
}

@media screen and (max-width: 540px) {
    #introduction_and_goals {
        padding: 40px 15px;
    }
    #form_mail {
        padding: 40px 15px 60px;
    }
    #no_cookies {
        padding: 60px 15px;
    }
    
}

@media screen and (max-width: 790px) {
    #title_my_skils {
        padding-left: 40px;
        padding-right: 40px;
    }
}

/* Introduction_and_goals custom */

@media screen and (max-width: 790px) {
    #introduction_and_goals {
        word-wrap: break-word;
    }
}

/* Skill_field custom */

@media screen and (max-width: 1556px) {
    #skills_field {
        width: 900px;
    }
}
        
@media screen and (max-width: 1025px) {
    #skills_field {
        width: 80%;
    }
    
    .skill_label {
        width: 90%;
    }
}

@media screen and (max-width: 520px) {
    .skill_label:hover {
        height: 200px;
        transition: 1s ease-out;
    }
}

@media screen and (max-width: 400px) {
    .skill_label {
        width: 85%;
    }
    
    .skill_label:hover {
        height: 275px;
        transition: 1s ease-out;
    }
}

/* portfolio_experiences_field custom */

@media screen and (max-width: 1556px) {
    .frame {
        width: 40%;
        height: 280px;
    }
}

@media screen and (max-width: 1285px) {
    .frame {
        width: 42%;
        height: 280px;
        word-wrap: break-word
    }
    #portfolio_list {
        width: 100%;
    }
}

@media screen and (max-width: 1070px) {
    .frame {
        width: 85%;
        transition: none;
    }
    .label_more {
        height: 100% !important;
    }
    .label_more_content {
        margin-top: 20px;
    }
    .frame_explanation .font_title_section {
        height: 100%;
        
    }   
    .relative {
        position: relative;
    }
}

@media screen and (max-width: 460px) {
    .frame {
       height: 380px;
    }
    .frame_explanation {
        margin-left: 15px;
    }
}

@media screen and (max-width: 500px) {
    .switcher {
        width: 100%;
    }
}

/* form_mail_field custom */

@media screen and (max-width: 950px) {
    #form_mail_field {
        word-wrap: break-word;
    }
}

@media screen and (max-width: 380px) {
    #form_mail_field {
        word-wrap: break-word;
    }
}

/* Go_up custom */

@media screen and (max-width: 570px) {
 #go_up {
     font-size: 0.7rem;
        right: 5px;
    }
}