@font-face {
    font-family: 'ralewayblack';
    src: url('../../fonts/raleway-black-webfont.eot');
    src: url('../../fonts/raleway-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/raleway-black-webfont.woff2') format('woff2'),
         url('../../fonts/raleway-black-webfont.woff') format('woff'),
         url('../../fonts/raleway-black-webfont.ttf') format('truetype'),
         url('../../fonts/raleway-black-webfont.svg#ralewayblack') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'ralewaybold';
    src: url('../../fonts/raleway-bold-webfont.eot');
    src: url('../../fonts/raleway-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/raleway-bold-webfont.woff2') format('woff2'),
         url('../../fonts/raleway-bold-webfont.woff') format('woff'),
         url('../../fonts/raleway-bold-webfont.ttf') format('truetype'),
         url('../../fonts/raleway-bold-webfont.svg#ralewaybold') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'ralewaylight';
    src: url('../../fonts/raleway-light-webfont.eot');
    src: url('../../fonts/raleway-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/raleway-light-webfont.woff2') format('woff2'),
         url('../../fonts/raleway-light-webfont.woff') format('woff'),
         url('../../fonts/raleway-light-webfont.ttf') format('truetype'),
         url('../../fonts/raleway-light-webfont.svg#ralewaylight') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'ralewayregular';
    src: url('../../fonts/raleway-regular-webfont.eot');
    src: url('../../fonts/raleway-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../../fonts/raleway-regular-webfont.woff2') format('woff2'),
         url('../../fonts/raleway-regular-webfont.woff') format('woff'),
         url('../../fonts/raleway-regular-webfont.ttf') format('truetype'),
         url('../../fonts/raleway-regular-webfont.svg#ralewayregular') format('svg');
    font-weight: normal;
    font-style: normal;
}


body, html { height: 100%; margin: 0; background:white; font-family:'ralewayregular'; font-size:16px; line-height:1.2; color:#2E2E2D; }

#mainLogoHolder { position:fixed; z-index:950; top:3vw; left:2vw; width:15vw; }
#header_right { position:fixed; z-index:1000; top:3vw; right: 2vw; }
#mainLogo { max-width:130px; padding-right:1em; }

#header_right a {
    margin:0px 7px;
}
.topimg {
    position:relative;
    width:100%;
    height:100vh;
    background-image: url(../imgs/sports_topimg.png);
    background-size: cover;
    background-position: center;
}
.container_max {
    max-width:1500px;
    margin-left:auto;
    margin-right:auto;
}
.color_red {
    color:#C4000B;
}
.color_black {
    color:#2E2E2D;
}
.color_white {
    color:white;
}
.back_darkgray {
    background-color:#2E2E2D;
}
.back_red {
    background-color: #C4000B;
}
.back_graylight {
    background-color: #8C8B8B;
}
.title {
    font-size:70px;
    font-family: 'ralewayblack';
    font-weight: bold;
}
.main_title {
    padding-top:163px;
    padding-left: 15vw;
}
#scrolldown {
    padding-left:15vw;
    position:absolute;
    left:0px;
    bottom:100px;
}
.header_wrapper {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    z-index: 99;
    padding-top:20px;
    padding-left:20px;
}
.header {
    position:relative;
}
.grid_cols {
    display:grid;
    grid-template-columns: 11% 1fr 400px;
}
.position_relative {
    position:relative;
}
.ico_abs {
    position:absolute;
    top:200px;
    top:160px;
    right:0px;
    transform:translateX(50%)!important;
}
.listline {
    width:65px;
    height:3px;
    background-color:white;
    display: inline-flex;
    margin-bottom: 4px;
    margin-right: 20px;
}
.bold {
    font-weight: bold;
}
.float_right {
    float:right;
}
.text-right {
    text-align:right;
}
.proyectos_wrapper {
    padding-right:150px;
}
.proyecto {
    font-size:27px;
    font-family: 'ralewayblack';
    font-weight: bold;
    border-bottom:3px solid #C4000B;
    padding-bottom:15px;
    padding-top:20px;
    padding-right: 50px;
    position:relative;
}
.proyecto_link {
    position:absolute;
    top:50%;
    right:20px;
    transform:translateY(-50%);
}
.shadow_bottom {
    -webkit-box-shadow: 0px 5px 5px 0px rgba(77,77,77,1);
    -moz-box-shadow: 0px 5px 5px 0px rgba(77,77,77,1);
    box-shadow: 0px 5px 5px 0px rgba(77,77,77,1);
}
.footer {
    background-color: #8C8B8B;
    padding-top:60px;
    padding-bottom:20px;
}
.face {
    position:fixed;
    top:250px;
    right:0px;
    width:400px;
    z-index:999;
    text-align:center;
}
.square {
    width:90px;
    height:90px;
    background-color:rgba(255, 255, 255, 0.486);
    display: inline-block;
    margin-left:7px;
    margin-right:7px;
    margin-bottom:90px;
}
.rectangle {
    width:100%;
    height:69px;
    background-color: #C4000B;
}
.mw568 {
    max-width:600px;
}
.section_target {
    padding-bottom:100px;
}


#menuBtn { position:fixed; z-index:1000; top:50%; left:2%; width:70px; height:70px; transform:translateY(-50%); cursor:pointer; }
#menuTxt { position:absolute; top:50%; left:26px; transform:translateY(-48%); transition:0.5s; font-size:1em; }
#squaresHolder { position:relative; width:18px; height:95px; }
#redSquare1 { position:absolute; z-index:10; width:18px; height:18px; background:#D10A11; top:0; left:0; transition:0.5s; }
#redSquare2 { position:absolute; z-index:30; width:18px; height:18px; background:#D10A11; top:26px; left:0; transition:0.5s; }
#redSquare3 { position:absolute; z-index:20; width:18px; height:18px; background:#D10A11; top:52px; left:0; transition:0.5s; }
#menuBtn.sel #menuTxt { color:#434343; }
#menuBtn.sel #redSquare1, #menuBtn.sel #redSquare2, #menuBtn.sel #redSquare3 { background:#434343; top:26px; }
#menuX { position:absolute; z-index:40; top:26px; left:0; width:18px; height:18px; opacity:0; }

#menuBtn:hover #menuTxt { color:#D10A11; transition:0.3s ease; }
#menuBtn:hover #redSquare1 { background:#D10A11; top:26px; transition:0.3s ease; }
#menuBtn:hover #redSquare2 { background:#D10A11; top:26px; transition:0.3s ease; }
#menuBtn:hover #redSquare3 { background:#D10A11; top:26px; transition:0.3s ease; }

#menuSection { position:fixed; z-index:950; top:0; left:-1%; width:0; height:100vh; height: calc(var(--vh, 1vh) * 100); }
.menuBg1 { position:absolute; z-index:50; top:0; left:-17%; height:100%; width:16.5%; background:#FFF; border-right:1px solid #C6C6C6; display:block; }
.menuBg2 { position:absolute; z-index:40; top:0; left:-34%; height:100%; width:33.2%; background:#FFF; border-right:1px solid #C6C6C6; display:block; }
.menuBg3 { position:absolute; z-index:30; top:0; left:-50%; height:100%; width:49.9%; background:#FFF; border-right:1px solid #C6C6C6; display:block; }
.menuBg4 { position:absolute; z-index:20; top:0; left:-67%; height:100%; width:66.6%; background:#FFF; border-right:1px solid #C6C6C6; display:block; }
.menuBg5 { position:absolute; z-index:10; top:0; left:-84%; height:100%; width:83.3%; background:#FFF; border-right:1px solid #C6C6C6; display:block; }
.menuBg6 { position:absolute; z-index:9; top:0; left:-100%; height:100%; width:100%; background:#FFF; border-right:1px solid #C6C6C6; display:block; }

#menuHolder { position:absolute; z-index:45; top:50%; left:-49.9%; height:auto; /*width:49.9%;*/ transform:translateY(-50%); }
.mainLink { font-family:'ralewayblack'; font-size:5.5vw; line-height:1.1; color:#434343; text-decoration:none; display:block; clear:both; padding-left:0; margin-left:-50vw; transition:0.5s; }
.mainLink:hover, .mainLink.sel { color:#D10A11; text-decoration:none; transition:0.3s ease; }
#submnBtn1 { position:absolute; z-index:45; top:80%; left:16.3vw; height:auto; width:105px; padding-top: 1vw; margin-left:-145.9vw; }
#submnBtn2 { position:absolute; z-index:25; top:80%; left:49.2vw; height:auto; width:170px; padding-top: 1vw; margin-left:-110vw; }
#submnSocials { position:absolute; z-index:45; top:90%; left:16.3vw; height:auto; width:300px; padding-top: 1vw; margin-left:-145.9vw; padding-left:10px; }
.subLink { font-family:'ralewaybold'; font-size:1.2em; color:#434343; text-decoration:none; display:block; padding-left:1vw; transition:0.5s; }
.subLink:hover { color:#D10A11; text-decoration:none; transition:0.3s ease; }
.subLinkLine { position:absolute; top:0; left:-1em; width:6em; height:2px; display:block; clear:both; background: #D10A11; }
#submnSocials a {
    margin-right:15px;
}

.owl-dots {
    display:none;
}
.main_title_mobile {
    display:none;
}
.footer_row_1 {
    margin-bottom:120px;
}
/* MEDIA QUERIES */
@media (max-width:1210px)	 {
    .grid_cols  {
        
        grid-template-columns: 0% 1fr 300px;
        /*display:block;*/
        padding-right:0px;
        padding-left:20px;
    }
    .proyectos_wrapper {
        padding-right:0px;
        padding-left:0px;
    }
    .title {
        font-size:50px;
    }
    .ico_abs {
        top:100px;
    }
    .face {
        width:300px;
    }
    .xspaddingleft {
        padding-left: 15vw;
    }
}
@media (max-width:1038px)	 {
    .overflowxhidden {
        overflow-x:hidden;
    }
    .grid_cols {
        display:block;
    }
    .face {
        display:none;
    }
    .ico_abs {
        transform:unset!important;
    }
}
@media (max-width:910px){
    .ico_abs {
        transform:translateX(50%)!important;
    }
}
@media (max-width:752px) {
    .ico_abs {
        display:none;
    }
    .mw568 {
        max-width:100%;
    }
    .grid_cols  {
        padding-right:20px;
    }
    
}
@media (max-width:650px) {
    .main_title {
        padding-top:200px;
    }
    .title {
        font-size:40px;
    }
    .main_title_mobile {
        display:block;
    }
    .main_title_desktop {
        display:none;
    }
    .footer, .footer .text-right {
        text-align:center;
    }
    .logo_footer {
        width:110px;
        margin-bottom:30px;
    }
    .logo_footer_color {
        margin-bottom:30px;
    }
    .footer_row_1 {
        margin-bottom:40px;
    }
    
    #scrolldown {
        max-width: 210px;
    }
}
@media (max-width:500px) {
   
    .topimg {
        background-image: url(../imgs/topimg_mvl.png);
        background-position: top center;
    }
}



@media all and (min-width: 500px) and (max-width: 768px) {

    #contactLink { top:22vw; font-size:0.9em; }
    #submnBtn1 { top:66%; padding-top:2vw; }
    #submnBtn2 { top:66%; padding-top:2vw; }
    #submnSocials { top: 77%; }
    .subLink { font-size:1em; padding-left:2vw; }

}


@media all and (min-width: 10px) and (max-width: 499px) {

    #mainLogoHolder { top:5vw; left:0; width:15vw; transform: rotate(-90deg); }
    #mainLogo {
        padding-right: 0.5em;
    }
    #menuBtn { left:1.5%; }
    #menuTxt { left:20px; font-size:0.7em; }
    .mainLink { font-size:7.5vw; line-height:1.4; padding-left:10px; }
    #submnBtn1 { top:66%; padding-top:2vw; width:70px; }
    #submnBtn2 { top:66%; left:48.6vw; padding-top:2vw; width:70px; }
    #submnSocials { top: 77%; }
    .subLink { font-size:1em; padding-left:1.5vw; }
    .subLinkLine { width:4.5em; }

    
}

#contactLink{
    font-size:18px;
    font-weight: bold;
    margin-top:20px;
    text-align:center;
}
#contactLink a {
    color:white;
}