margin: 0px;
    padding: 0px;
    box-sizing: border-box;
   }

html,body{
    width: 100%;
    height: 100%;
  
}




.no_scroll{
    overflow:hidden;

}

.si_scroll{
    overflow: auto;
}

img{width: 100%;}

.container{margin: 40px 40px 40px 75px;
}

.container2{max-width: 1750px;
margin: 0px auto;}



/*.....BORDES BLANCOS Y COSAS DE INICIO....*/

.invertir{ flex-direction: row-reverse;}
body{background-color: white;}

.borde1{position: fixed;
top: 0px;
left: 0px;
height: 100%;
    width: 75px;
background-color: white;
z-index: 99;}

.borde2{position: fixed;
top: 0px;
width: 100%;
    height: 40px;
background-color: white;
z-index: 99;}


.borde3{position: fixed;
top: 0px;
right: 0px;
height: 100%;
    width: 40px;
background-color: white;
z-index: 99;}

.borde4{position: fixed;
bottom: 0px;
width: 100%;
    height: 40px;
background-color: white;
z-index: 99;}

#logopeque{ position: fixed;
    top: 15px;
    left: 80px;
    width: 35px;
    z-index: 100;
}

#logopeque img{width: 35px;}

#logopeque2{ position: fixed;
    top: 15px;
    left: 80px;
    width: 35px;
    z-index: 100;
}

#logopeque2 img{width: 35px;}



#inicioenlace{transform: rotate(90deg);
position: fixed; 
bottom: 120px;
    left: -35px;
z-index: 100;}

#inicioenlace a{font-weight: 600;
font-size: 14px;
color: #1D1D1D;}

#inicioenlace a:hover{text-decoration: underline;}

.text-derecha{text-align: right;}


/*.....TIPOGRAFIAS Y TITULOS.....*/
h1{font-family: 'Public Sans', sans-serif;
font-size: 145px;
    line-height: 148px;
}

h2{font-family: 'Public Sans', sans-serif;
    font-weight:900;
font-size: 95px;
    line-height:90PX;
    margin: 0px 0px 25px 0px;
}

h3{font-family: 'Public Sans', sans-serif;
    font-weight:900;
font-size: 45px;
    line-height:50PX;}

h4{font-family: 'Public Sans', sans-serif;
    font-weight:800;
font-size: 25px;
    line-height:35PX;}

p{font-family: 'Gothic A1', sans-serif;
font-size: 18px;
font-weight: 300;}


.activoenlace{text-decoration:underline;}




/*...........COLUMNAS Y GRID....*/

.flexi{display: flex;
flex-wrap: wrap;
justify-content: space-between;
    
}

.col-1{width: 8.33%}
.col-2{width: 16.66%}
.col-3{width: 25%}
.col-4{width: 33.33%}
.col-5{width: 41.66%;}
.col-6{width: 50%}
.col-7{width: 58.33%;}
.col-8{width: 66.66%}
.col-9{width: 75%}
.col-10{width: 83.33%}
.col-11{width: 91.66%}
.col-12{width: 100%}

.gridinicio{margin-left: 12.66%;
margin-right: 12.66%;
margin-top: 150px;
margin-bottom:0%;}

.gridservicios{margin-left: 12.66%;
margin-top: 150px;}


/*......ESTILOS INICIO.......*/
.creacolor{font-family: 'Gothic A1', sans-serif;
font-size: 18px;
font-weight: 500;

display: block;
width: max-content;
border-bottom: 2px solid;
}

.creacolor:hover{font-weight: 900;
color: #FDD500;
display: block;}


.esfuercolor{font-family: 'Gothic A1', sans-serif;
font-size: 18px;
font-weight: 500;
    width: max-content;
    border-bottom: 2px solid;
    display: block;
    float: right;}

.esfuercolor:hover{
    font-weight: 900;
color: #FF6D61;
    display: block;
}

.comunicolor{font-family: 'Gothic A1', sans-serif;
font-size: 18px;
font-weight: 500;
display: block;
      width: max-content;
    border-bottom: 2px solid;
    display: block;
}

.comunicolor:hover{
    font-weight: 900;
color: #1095FC;
    display: block;
}


.alinearderecha{text-align: right;}



.padre{position: relative;}

.isotipoamarillo{position: absolute;
width: 35px;
bottom: 65px;
left: 335px;}

.isotiporojo{position: absolute;
width: 35px;
bottom: 65px;
right: 305px;}

.isotipoazul{position: absolute;
width: 35px;
top: 190px;
left: 200px;}


.dch{float: right;}

footer p{z-index: 999;}



/*......ANIMACIONES..........................*/

#bombilla{
    visibility: hidden;}

#objetivos{
    visibility: hidden;}

/*...#boca{
    visibility: hidden;}...*/



/*........:::::SERVICIOS:::::::...........*/
.fondoservi{background-color: #FF6D61;
height: 100vh;
        display: table;
}



.fondoservi h1{padding-left: 10%;
color: white;
display: table-cell; 
vertical-align: middle;
position: relative;
max-width: 575px;}

.fondoservi h1 img{position: absolute;
bottom: 40%;
left: 470px;
width: 60px;}

.servi h2{
    margin-left: 10%;

max-width: 520px;
    font-size:60px;
line-height: 65px;}

.servicioscuadro{background-color:#1D1D1D;
color: #A7A7A7;}

.servicioscuadro b{color: white;
text-decoration: underline;}

#per1{display: none;}
#per2{display: none;}



#brand{border-bottom: 3px solid black;
padding-bottom: 10px;}

#disweb{border-bottom: 3px solid black;
padding-bottom: 10px;}

.clientesmargenes{padding-top: 75px;}


/*.....SOBRE MI.....*/
.fondosobremi{background-color: #1D1D1D;
height: 100vh;
}

.fondosobremi h1{line-height: 0px;}

.fondosobremi .col-5{margin-top: auto;
    margin-bottom: auto;
margin-left:8.33%;}

.fondosobremi .col-4{position: absolute;
top: 20%;
right: 8.33%;}

.boton2{background-color: white;
color:#1D1D1D;
padding: 10px;}

.boton2:hover{background-color:#1D1D1D;
color:white;
    border: 1px solid white;
}

.boton3{background-color: #1D1D1D;
color:white;
padding: 10px;}

.boton3:hover{background-color:white;
color:#1D1D1D;
    border: 1px solid #1D1D1D;
}

.boton3:active{background-color:white;
color:#1D1D1D;
    border: 1px solid #1D1D1D;
}

.containersobremi{margin:0px 40px 40px 40px;}


/*.........TRABAJOS......*/

.fondotrabajos{background-color: #FDD500;
height: 100vh;
    display: table;
}



.fondotrabajos h1{padding-left: 10%;
color: white;
display: table-cell; 
    vertical-align: middle;
position: relative;
max-width: 575px;}



.fondotrabajos h1 img{position: absolute;
bottom: 40%;
left: 450px;
width: 60px;}

.trabajos h2{
    margin-left: 10%;
    font-size:60px;
line-height: 65px;
max-width: 520px;}

.alinear{margin-top: auto;
margin-bottom: auto;}



/*....CONTACTO.....*/


.fondocontacto{background-color: #1572FB;
height: 100vh;
    display: table;
}



.fondocontacto h1{padding-left: 10%;
color: white;
display: table-cell; 
    vertical-align: middle;
position: relative;
max-width: 575px;}



.fondocontacto h1 img{position: absolute;
bottom: 40%;
left: 430px;
width: 60px;}

.contacto h2{
    margin-left: 10%;
    font-size:60px;
line-height: 65px;
max-width: 520px;}

/*.........TRABAJOS......*/

.logotipotrabajos{width: 40%;
display: none;}

.contenidotrabajos img{margin-bottom: 70px;}

.contenidotrabajos div{margin-bottom: 70px;
padding-right: 15%;
padding-left: 15%;
padding-top: 5%;
padding-bottom: 5%;}


.no_scroll{
    overflow:hidden;
    height: 100%;
    max-height: 100%;
}

.videoperso{
    padding-left: 5%;
padding-top: 5%;
padding-bottom: 5%;
    
}

/*......CONTACTO......*/

.contactocolumnas{margin-top: 100px;
    margin-bottom: 100px;
}
.contactocolumnas .col-4{
    padding: 40px;}


.ocultartableta{display: none;}
.ocultarmovil{display: none;}

/*..............TRABAJOS 2..................*/
#trabajos2menu{
    display: none;
}

.project-content {
    color: #1d1d1d;
    padding-top: 70px;
    padding-left: 10%;
    background: white;
    box-shadow: 0 -5px 0 white;
}

.project-content p{
    color: #1d1d1d;width: 90%;
    max-width: 1750px;
    margin: 2em auto;
    line-height: 1.6;
    color: #1d1d1d;}

.project-content h2 {
    color: #1d1d1d;
    font-size: 20px;
    font-weight: bold;
    line-height: 2rem;
}

   .margenportfolio{margin-top: 75px;
    margin-bottom: 75px;}
    
    .margen-texto{margin-top: auto; margin-bottom: auto;}


.grid figure img{}

.grid figure img:hover{filter: none;}

.portfolio-imagenes1 {background-image: url(img/photo-1.jpg);
    vertical-align: middle;
    background-size: 100%;
    filter: grayscale(1);
    transition: 0.7s;
    margin:100px;

}

.portfolio-imagenes1:hover{filter: none;}


.portfolio-imagenes2 {background-image: url(img/photo-2.jpg);
    vertical-align: middle;
    height: auto;
    background-size: 100%;
    filter: grayscale(1);
    transition: 0.7s;
    margin:100px;

}

.portfolio-imagenes2:hover{filter: none;}




.portfolio-imagenes3 {background-image: url(img/photo-3.jpg);
    vertical-align: bottom;
    background-size: 100%;
    filter: grayscale(1);
    transition: 0.7s;
    
}
.portfolio-imagenes3:hover{filter: none;}

.portfolio-imagenes4 {background-image: url(img/photo-4.jpg);
    vertical-align: middle;
    background-size: 100%;
    filter: grayscale(1);
    transition: 0.7s;
    margin:100px;

}

.portfolio-imagenes4:hover{filter: none;}

.portfolio-imagenes5 {background-image: url(img/photo-5.jpg);
    vertical-align: top;
    background-size: 100%;
    filter: grayscale(1);
    transition: 0.7s;
}
.portfolio-imagenes5:hover{filter: none;}

.portfolio-imagenes6 {background-image: url(img/photo-6.jpg);
    vertical-align: middle;
    background-size: 100%;
    filter: grayscale(1);
    transition: 0.7s;
    margin:100px;

}

.portfolio-imagenes6:hover{filter: none;}

.portfolio-imagenes7 {background-image: url(img/photo-7.jpg);
    vertical-align: top;
    background-size: 100%;
    filter: grayscale(1);
    transition: 0.7s;
}
.portfolio-imagenes7:hover{filter: none;}

.portfolio-imagenes8 {background-image: url(img/photo-8.jpg);
    vertical-align: middle;
    background-size: 100%;
    filter: grayscale(1);
    transition: 0.7s;
    margin:100px;

}

.portfolio-imagenes8:hover{filter: none;}

.logotiposportfolio{width: 500px;
    height: auto;
    display: block;
     margin:3% auto;
}



.mostrarapartir720{display: none;}
    .ocultarapartir720{display: block;}

/*...#uncierre{visibility: hidden;}...*/


.flatcomunicacion{width: 100px;
margin-left: 20px;
margin-top: -20px;}


/*......................MEDIAQUERY.........*/

/*PANTALLAS GRANDES*/
@media only screen and (min-width: 1400px){
   p{font-family: 'Gothic A1', sans-serif;
       font-size: 23px;}
    
    a.comunicolor{ font-size: 23px;}
     a.esfuercolor{ font-size: 23px;}
    a.creacolor{ font-size: 23px;}
    
    .gridinicio .alinearderecha{padding-left: 50px;}
    
    .servicioscuadro b{font-size: 23px;}
    
    
    

.fondoservi h1 {
    font-size: 175px;
    line-height: 185px;
    
}

.fondoservi h1 img {
    position: absolute;
    bottom: 41%;
    left: 585px;
    width: 70px;}
    
    .servi h2 {
    margin-left: 10%;
    max-width: 520px;
    font-size: 80px;
    line-height: 85px;
}
    
    .fondocontacto h1 img {
    position: absolute;
    bottom: 41%;
    left: 470px;
    width: 70px;}
    
    .contacto h2 {
    margin-left: 10%;
    font-size: 66px;
    line-height: 71px;
    max-width: 520px;
        
}
    h5{font-size: 25px;}
    
}


/*PANTALLAS 1100-TABLETA*/

@media only screen and (max-width: 1100px){
    .borde1{width: 40px;}
    
    .logotiposportfolio{
     margin:5% auto;
}
    #isotipopeque img {display: none;}
    

    
    #inicioenlace{display: none;}
    
    #logopeque {left: 45px;}
    #logopeque2 {left: 45px;}
    
    .container {margin:  40px;}
    
    .gridinicio {margin-left: 8%;
        margin-right: 8%;
    margin-top: 90px;}
    
    h1{font-size: 115px;
    line-height: 120px;}
    
    .fondoservi h1 img {
    position: absolute;
    bottom: 40%;
    left: 365px;
        width: 50px;}
        
        .contacto h2 {
    margin-left: 10%;
    font-size: 50px;
    line-height: 55px;
    max-width: 520px;
}
    
    .fondocontacto h1 img {
    position: absolute;
    bottom: 40%;
    left: 349px;
    width: 50px;
}
    
    .gridservicios{margin-left: 8%;}

   h4{font-family: 'Public Sans', sans-serif;
    font-weight:800;
font-size: 20px;
    line-height:25PX;}
    
    .col-t-1{width: 8.33%}
.col-t-2{width: 16.66%}
.col-t-3{width: 25%}
.col-t-4{width: 33.33%}
.col-t-5{width: 41.66%;}
.col-t-6{width: 50%}
.col-t-7{width: 58.33%;}
.col-t-8{width: 66.66%}
.col-t-9{width: 75%}
.col-t-10{width: 83.33%}
.col-t-11{width: 91.66%}
.col-t-12{width: 100%}
    
    
    /*....*/
    #trabajos2menu a{font-weight: 700;
  
font-size: 13px;
color: #1D1D1D;}

#trabajos2menu a:hover{text-decoration: underline;}

#trabajos2menu{position: fixed;
    top: 16px;
    right: 40px;
display: flex;
    z-index: 100;}
    
}



/*.......TABLETAS......*/



@media only screen and (max-width: 900px){
    p{font-size: 16px;}
.col-t-1{width: 8.33%}
.col-t-2{width: 16.66%}
.col-t-3{width: 25%}
.col-t-4{width: 33.33%}
.col-t-5{width: 41.66%;}
.col-t-6{width: 50%}
.col-t-7{width: 58.33%;}
.col-t-8{width: 66.66%}
.col-t-9{width: 75%}
.col-t-10{width: 83.33%}
.col-t-11{width: 91.66%}
.col-t-12{width: 100%}
    
    h1{font-size: 90px;
    line-height: 95px;}
    
    .container{margin: 10px;}
    .containersobremi{margin: 10px;}
    
    .fondoservi h1{padding-bottom: 50px;
    left: 8%;}
    
    .fondoservi h1 img {
    position: absolute;
    bottom: 45%;
    left: 290px;
        width: 45px;}
    
    .servi h2 {
    margin-left: 10%;

    font-size: 50px;
    line-height: 55px;
}
    
    .hamburger {
    width: 60px;
        height: 60px;}
        
        h3 {
    font-family: 'Public Sans', sans-serif;
    font-weight: 900;
    font-size: 35px;
  line-height: 40px;
}
    
    .fondocontacto h1 {padding-bottom: 50px;
        left: 8%;
}
    .fondocontacto h1 img {
    position: absolute;
    bottom: 45%;
    left: 265px;
    width: 45px;
        
}
    h2 {font-size: 75px;
    line-height: 70px;}
    .contacto h2 {
    margin-left: 10%;
    font-size: 40px;
    line-height: 45px;
}
    h4{font-size: 18px;
    line-height: 20px;}
    
    .fondosobremi .col-4 {
    position: absolute;
        top: 35%;}
    
    .fondosobremi .col-5 {

        margin-left: 11.33%;}
    
    .gridinicio {
        margin-right: 6%;}
    
        .isotipoamarillo{
    width: 30px;
            bottom: 49px;
    left: 265px;}
    
    .isotiporojo{
    width: 30px;
    bottom: 45px;
    right: 245px;}
    
    .isotipoazul {
    width: 35px;
    top: 150px;
    left: 166px;
}
    nav.cd-3d-portfolio-navigation h1{
    font-size: 3rem;
    line-height: 3rem;
}
    .cd-3d-portfolio-navigation {
    width: 550px;
}
    
    footer{padding-bottom: 40px;
    padding-left: 40px;
    padding-right: 40px;}
    
    .ocultarordenador{display: none;}
    .ocultartableta{display: block;}
    
   
}

@media only screen and (max-width: 720px){
    
    
    .mostrarapartir720{display: block;}
    .ocultarapartir720{display: none;}
    .col-tm-12{width: 100%}
    .ocultarbordes{display: none;}
    .container{margin: 0px;}
    .containersobremi{margin: 0px;}
    .gridinicio {margin-left: 15px;
        margin-right: 15px;}
        .borde2{height: 60px;}
    #logopeque {
    position: absolute;
    top: 35px;
    left: 24px;
    width: 50px;
    z-index: 100;
        
}
    
    #logopeque2 {
    position: fixed;
    top: 20px;
    left: 24px;
    width: 50px;
    z-index: 100;
       
}
    #logopeque2 img{width: 60px;
    }
    
    #logopeque img{width: 50px;
    
}
    .hamburger {
    width: 64px;
    height: 64px;
    display: block;
    cursor: pointer;
    position: fixed;
    top: 15px;
    right: 25px;
    left: auto;
 
}
    
     .fondosobremi .col-5 {
         margin-left: 50px;}
    
    
    .fondoservi h1 {
    left: 0px;
    /* left: 8%; */
}
.fondoservi h1 {
    font-size: 85px;
   padding-left: 15px;
}
    .fondoservi h1 img {
bottom: 47%;
    left: 250px;

}
    .servi h2 {
    
        font-size: 40px;}
    
    .gridservicios {margin-left: 20px}
    
    .fondocontacto h1 {left: 0%;
     font-size: 85px;}
    
    .fondocontacto h1 img {left: 255px;}
    
    .contacto h2 {
    margin-left: 10%;
    font-size: 35px;
    line-height: 35px;
}
    .contactocolumnas p{max-width: 370px;
    margin: auto;}
    
    .contactocolumnas img{width: 200px;}
    


#trabajos2menu{position: fixed;
    top: 25px;
    right: 40px;
display: flex;
    z-index: 100;}
    

    
    .col-p-1{width: 8.33%}
.col-p-2{width: 16.66%}
.col-p-3{width: 25%}
.col-p-4{width: 33.33%}
.col-p-5{width: 41.66%;}
.col-p-6{width: 50%}
.col-p-7{width: 58.33%;}
.col-p-8{width: 66.66%}
.col-p-9{width: 75%}
.col-p-10{width: 83.33%}
.col-p-11{width: 91.66%}
.col-p-12{width: 100%}
    
    .project-content{
        padding-right: 20px;
    padding-left: 20px;
    }
    
    .margen-texto{margin-top: 40px;}
    
    .contenidotrabajos img {
        margin-bottom: 10px;}
    
    .margenportfolio{margin-top: 25px;
    margin-bottom: 25px;}
    
    .logotiposportfolio{width: 330px;
    height: auto;
 
}
    
    .flatcomunicacion{margin-bottom: 50px;}
    
   
    
    
 
}

    


@media only screen and (max-width: 575px){
    
    .logotiposportfolio{
     margin:10% auto;
}
    
     .ocultarordenador{display: none;}
    .ocultartableta{display: none;}
     .ocultarmovil{display: block;}
    
    .col-m-1{width: 8.33%}
.col-m-2{width: 16.66%}
.col-m-3{width: 25%}
.col-m-4{width: 33.33%}
.col-m-5{width: 41.66%;}
.col-m-6{width: 50%}
.col-m-7{width: 58.33%;}
.col-m-8{width: 66.66%}
.col-m-9{width: 75%}
.col-m-10{width: 83.33%}
.col-m-11{width: 91.66%}
.col-m-12{width: 100%}
    
    footer{padding-top: 40px;
        text-align: center;}
    
    footer .col-m-12{margin-top: -30px;}
    
    .text-derecha{text-align: center;}
    
    h2{margin: 0px 0px 0px 0px;}
    
    .comunicacionmovilinicio{margin-top: 50px;}

    .gridinicio video{padding-top:30px; }
    
    .fondosobremi .col-5 {
    margin-left: 20px;
        margin-right: 20px;
}
    .fondoservi h1 img {
    bottom: 47%;
    left: 270px;
}
    .gridservicios {
        margin-top: 50px;
    margin-left: 20px;
        margin-right: 20px;}
    
    .servicioscuadro{padding-top: 35px;
    padding-bottom: 35px;}
    
    .fondoservi h1 {padding-left: 8%;}
    
    .ocultarpeque{display: none;}
    
    .logotiposportfolio{width: 250px;
    
}
    
    .clientesmargenes{padding-top: 15px;}
    

    
    
    
     
}

    a {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .4s;
}

a:hover, a:focus {
    background-size: 100% 2px;
}

#isotipopeque{position: fixed;
top: 50px;
left: 20px;
z-index: 100;
color: white;}


#isotipopeque:hover{
    animation-name:zoom;
    animation-duration: 1s;

    
}

#isotipopeque img{width: 35px;}


@keyframes zoom{
        from{transform: rotate(0deg);
       }
        to{transform: rotate(-360deg);
        }


.esfuercolor {
    background-position: 100% 100%;
}