/*
	Theme Name: Salsa Perrín template
	Theme URI: http://ivan-castro.com/
	Author: Iván Castro
	Author URI: http://ivan-castro.com
	Description: WordPress blog theme based on the Bootstrap framework making it fully responsive and mobile friendly.
	Version: 1.0
*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=swap');
body, html { height: 100%;}
body { background: #000; color: #fff; font-family: 'DM Sans', sans-serif; padding: 0; margin: 0;}
.wrap { width: 1440px;padding: 0 25px; margin: 0 auto; position: relative}
header { overflow: hidden; padding-top: 25px}
header img { max-width: 138px; height: auto; float: left; display: none;}
header h1 a { text-decoration:none; color: #fff;}
header h1 {float: left; font-size: 42px; font-weight: bold; line-height: normal; border-bottom: none !important;}
header h1 span { font-weight:normal; font-size: 24px; display: block;}
header nav { float: right;}
header nav a { color: #fff; text-decoration: none; border-bottom: 1px solid #fff; display: inline-block; font-size: 30px;}
header nav ul, header nav ul li { display: block; padding: 0; margin: 0; }
header nav ul li { float: left; margin-right: 56px;}
header nav ul li:last-child{ margin-right: 0;}
header nav footer{ display: none;}
.intro { margin-top: 87px; position: relative; width: 100%;}
.intro h1 { display: none;}
.skills { font-size: 20px; line-height: 120%; margin-top: 80px; width: 65%;}
.intro .description{ width: 55%; font-size: 42px; line-height: 120%; float: left; margin-right: 4%;}
.portfolio { width: 40%; float: left}
.portfolio nav ul { margin: 0; padding: 0; counter-reset: section; }
.portfolio nav ul li { list-style: none;}
.portfolio nav ul li a { text-decoration: none; color: #fff; font-size: 47px; display: block; border-bottom: 1px solid #fff; padding-bottom:11px;}
.portfolio nav ul li a::after {counter-increment:section; content: "0" counter(section) ""; font-size: 20px; display: inline-block; transform: translate(10px, -20px)}
.moreprojects{ text-align: right; font-size: 47px; }
.moreprojects:before { content: "+"}
.more {color: #fff; display: inline-block; text-decoration: none; border-bottom: 1px solid #fff}
.featured { padding-top: 150px; clear: both; text-align: right;}
.featured img { display: block;}
.featured h1 a { display: inline-block; padding-top: 20px; font-weight: 300; font-size: 20px}
.contact{ clear: both; transform: rotate(-90deg); position: absolute; right: -253px; top: 400px}
.contact nav ul { display: block; text-align: right; padding: 0;}
.contact nav ul li { display: inline; margin-right: 30px;}
.contact nav ul li a { color: #fff; font-size: 30px; line-height:30px; text-decoration: 0; border-bottom:1px solid #fff;}
article a { color: #fff; text-decoration: none;}
.experience { padding-top: 100px}
.experience h1 { display: none;}
.experience article { float: left; width: 23.5%; margin-right: 2%; margin-bottom: 40px; padding-bottom: 70px;}
.experience article:nth-child(5n){ margin-right: 0;}
.experience article:nth-child(6n){clear: both;}
.experience article h2 { border-bottom: 1px solid #fff; font-size: 47px; line-height: 47px; font-weight: 400; font-weight: bold; letter-spacing: -2px; padding-bottom: 15px; margin-bottom: 20px}
.experience article h3 { font-size: 47px; font-weight: 400; margin-bottom: 20px; line-height: 120%; letter-spacing: -2px}
.experience article time { font-size: 20px; }
.experiece article p { font-size: 28px; line-height: 120%;}
.final { clear: both; border-top: 1px solid #fff; padding-top: 18px; width: 23.5%; margin-top: 52px;}
.experiences { overflow: hidden}
.clients, .homecontent { padding-top: 100px;}
.homecontent p { padding-bottom:30px;}
.clients h1 { font-weight: 400; font-size: 47px; border-bottom: 1px solid #fff; margin-bottom: 30px; padding-bottom: 10px; font-weight: bold; letter-spacing: -2px;}
.clients article p { font-size: 28px; width: 49%; float: left; margin-right: 2% }
.clients article p.list { font-size: 35px; margin-right: 0;}
.clear { clear: both;}
.selected article .col1 { width: 50%; float: left;}
.selected nav ul, .awards nav ul { padding: 0;}
.selected nav ul li, .awards nav ul li { font-size: 47px; list-style: none; }
.selected nav ul li a { text-decoration: none; border-bottom: 1px solid #fff;}
.selected .portfolio { float: right}
.awards nav ul li a { text-decoration: none;}
.awards nav ul li { border-bottom: 1px solid #fff}
.awards nav ul li a span { font-size: 28px; display: inline-block; padding:0 0 0 50px; transform: translateY(-10px); font-weight: 100;}
.info { background: #FF4141; margin-top: 100px; text-align: right; padding:40px 0;}
.credit { background: #fff; color: #FF4141; text-align: right; padding:40px 0;}
footer { margin-top: 400px;}
u { text-decoration: none; border-bottom:1px solid #fff;}
.wrap.single { padding-top: 50px;}
.single h1 { font-size: 47px; border-bottom: 1px solid #fff; padding-bottom: 10px; margin-bottom: 50px; }
.single article p:first-of-type { font-size: 35px; line-height: 100%;}
.single p { padding-bottom: 30px; }
.wp-block-image figcaption { margin-bottom: 30px !important; text-align: right;}
.single img { max-width: 100%; height: auto;}
*[x-apple-data-detectors],  /* iOS */
    .x-gmail-data-detectors,    /* Gmail */
    .x-gmail-data-detectors *,
    .aBn {
        border-bottom: 0 !important;
        cursor: default !important;
        color: inherit !important;
        text-decoration: none !important;
        font-size: inherit !important;
        font-family: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
    }


@media (min-width: 1440px) {
    a { transition: all .5s }
    a:hover { background: #fff; color: #000 !important; padding-left: 10px; padding-right: 10px;}
    header nav a { padding: 0 20px; transition: none;}
    header nav a:hover { border-radius:100px; border-bottom:none;padding: 0 20px; }
}

@media (max-width: 1440px) {
    .wrap { width: 100%}
    header h1 span { display: block; font-size: 20px; line-height: 100%}
}

@media (min-width: 1024px) {
    input[type=checkbox], input[type=radio], .menu-icon { display: none;}
}

@media (max-width: 1024px) {
    header h1 { font-size: 40px}
    header h1 span { font-size: 16px;}
    header img { max-width: 105px;}
    header nav { display: block; background: #fff; width: 100%; height: 100%; position: fixed; color:#000; top: 0; left: -100%; z-index: 3; transition: .5s all ease;}
    .intro .description{ margin-right: 0; width: auto; float: none; }
    .contact{ transform: rotate(0); position: relative; right: auto; top: auto; margin-top: 100px; padding: 0 25px;}
    .contact nav ul {text-align: left;} 
    .contact:before { content: "Contact"; font-weight: 400; font-size: 47px; border-bottom: 1px solid #fff; margin-bottom: 30px; padding-bottom: 10px; display: block;}
    .awards nav ul li a span { display: block; padding: 30px 0 0 0; font-size: 20px;}
    .contact nav ul li { display: block; margin: 0 0 30px 0;}
    .contact nav ul li:nth-child(odd) { float: left; width: 140px; margin-right: 30px;}
    .selected article .col1 { width: auto; float: none;}
    .selected .portfolio { float: none; width: auto}
    .selected .portfolio { display: none;}
    .selected nav ul li:after { content: "→"; font-size: 35px; margin-left: 10px;}
    .selected nav ul li, .awards nav ul li { font-size: 35px}
    .experience article { float: none; width: auto; margin-bottom: 55px; margin-right: 0;}
    .experience .wrap ~ .wrap{ display: none}
    .portfolio { width: auto; float: none; margin-top: 55px}
    .skills { width: auto;}
    .portfolio nav ul li a { font-size: 35px;}
    .moreprojects { text-align: left; font-size: 35px;}
    .clients article p { width: auto; margin-right: 0; float: none; font-size: 20px;}
    .clients article p.list { font-size: 30px; line-height: 110%; margin-top: 30px}
    .intro .description {font-size: 30px}
    .awards nav ul li { margin-bottom: 50px; padding-bottom: 20px}
    .info { text-align: left; font-size: 20px;}
    .credit { font-size: 13px; text-align: left;}
    footer { margin-top: 150px}
    .featured { text-align: left;}
    .featured .wrap { padding: 0;}
    .featured .wrap ~ .wrap { padding: 0 20px}
    label {display: inline-block;max-width: 100%;margin-bottom: 5px;font-weight: 700;}
    
    /* Menú*/
    .menu-icon {color: #fff;cursor: pointer;margin: 6px 6px 0 0;position: fixed;right: 15px;top: 15px;z-index: 12;background:#fff;font-size: 0px;font-weight: 700;border-radius: 100px;width:26px; height: 26px; overflow: hidden;}
    #menuToggle {display: none;}    
    input[type=checkbox], input[type=radio] {margin: 4px 0 0;margin-top: 1px \9;line-height: normal;}
    input[type=checkbox], input[type=radio] {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;padding: 0;}
    #menuToggle:checked ~ .menu-icon { background: #000; color: #000;}
    #menuToggle:checked ~ nav { left:0;}
    header nav a { display: block; color: #000; text-align: center; font-size: 40px;padding: 13px}
    header nav ul li { float: none; text-align: center; margin: 0; border-bottom: solid #000 1px;}
    header nav ul { padding: 60px 30px 30px 30px}
    header nav footer{ display: block; margin: 0; position: absolute; bottom: 0; width: 100%;}
    header nav footer .info { margin: 0; color: #fff; text-align: right; font-size: 14px; padding: 20px 0}
    header nav footer .credit { text-align: right; padding: 20px 0; }
}