/* column grid */
.g2,.g2e,.g2d,.g3,.g4,.g1-4,.g33,.g66, .g2a {display:inline-block; position:relative;float:left; margin-left: 1%; margin-right: 1%;outline:0px #ccc solid}
.g1f, .g2f {width:98%;display:inline-block; position:relative;float:left; margin-left: .5%; margin-right: .5%}
.g1 {display:inline-block; position:relative;float:left; margin-left: 0%; margin-right: 0%;outline:0px #ccc solid}

/*
.respe {text-align:center}
.respd {text-align:center;margin-bottom:15px}
*/

@media only screen and (min-width: 0px) {
    body {
        font-size:18px;    
    }
    
    .g1,.g2,.g2e,.g2d,.g3,.g4,.g1-4,.g33,.g66,.g2a {width:98.0%} 
    .g2f {width:100%;text-align:center;outline:0px red solid}
    .g1f {float:none;width:auto;min-width:215px;display:inline-block;text-align:left;outline:0px yellow solid}
    
    .visp   {display:block !important}
    .vism   {display:none !important}
    .visg, .visgi   {display:none !important}
    .hidp, .hidpi   {display:none !important}
    .hidm   {display:block !important}
    .hidg   {display:block !important} 
    .hidgm  {display:block}
    
    .menIdis {
        height: 42px;
        font-size:15px
    } 
    .lidi {
        margin-left:45px;
        padding-top:17px;        
    }
    
    .capca {height:80px}
    .logo {padding-top:15px;width:230px} 
    .menSup{padding-top:25px}  
    
    .mainTitP{ padding-top:40px;padding-bottom:25px;padding-left:0px;text-align:center;font-size:30px;}
    #nomPac {padding-top:15px;padding-bottom:10px;font-size:40px}
    
    .mainsize {padding:0 2%;width:96%}
    .WrapCont {margin-bottom:70px}
    .preCont {padding-top:50px;padding-bottom:45px;border-bottom:2px dotted}
    .preContL {float:none;width:100%;margin-left:0%;margin-bottom:20px;text-align:center}
    .preContR {float:none;width:100%;margin-right:0%}

    .preContR p, .preContR h2 {padding-left:50px;} 
    
    .iconpag {float:none;max-width:160px;margin:0 auto 28px auto;} 
    
    /*.cSlogan {max-width:140px}*/
    #slogan {font-size:17px;}    
    
    .fotoSecre {width:100%;float:left;display:inline-block;text-align:center;margin-top:35px} 
    .Hcitaon {float:none;width:auto;padding-top:40px;padding-bottom:0px;padding-left:40px;}     
    .telfhores {font-size:40px;padding-top:10px}
    .secresL {width:auto;float:none;margin-bottom:0px;padding-left:50px} 
    .secresR {width:100%;float:none;}     
   
    
    .titCentre {margin-left:50px}
    .centreR {width:auto;margin-left:50px;float:none}
    .Icentre {margin:0 10% 60px 10%}
    .centreL {width:100%;float:none}  
    #Wcentre {margin-bottom:35px;margin-top:50px} 
    
    .seuCent {padding-top:50px;padding-bottom:50px}
    .seus {padding-top:50px;}    
    .Ionsom {padding-left:0%;width:100%;max-width:none;margin-top:;text-align:center;float:none;} 
    .adreca {width:auto;padding-left:0px;float:none;text-align:center}     
     
    .cOsteos {margin:50px 5% 40px 5%;}
    #cvOst {top:15px;max-width:706px}
    .ctxtcvost {float:none;width:100%;overflow:hidden;height:auto}
    .fotocvost {float:none;width:100%;margin-bottom:15px}  
    .contocv {top:6.2%;left:4.1%;bottom:4.8%;right:4.1%;} 
    .wcvost {overflow:auto}    
    .txtcvoS {text-align:center}      
    
    .contTractem {float:none;width:auto}
    
    .CimgEntrada {width:100%;height:400px;text-align:center;z-index:-1;display:none;}
    /*.CimgEntradaP {width:100%;height:400px;text-align:center;z-index:-1;display:block;}*/
    .imgEntrada {margin:0 auto;position:static;max-height:390px;width:auto;display:none}
    .imgEntradaP {display:block;margin:0 auto;position:static;max-height:390px;width:auto;display:block}
    #registre {width:86%;margin-left:7%;margin-bottom:20px;margin-top:20px}
    #login_p, #login_u {width:85%;max-width:300px;margin-left:10%;margin-top:20px;margin-bottom:30px}
    .inpFormL {width:100%;float:none}
    .inpFormR {width:100%;float:none}      
    
    .WserveisP {padding:85px 0 10px 0;width:100%;text-align:center}
    .WserveisI {padding:30px 0 0px 0;width:100%;text-align:center}
    .servei4, .servei3 {width:52%;padding:0 ;margin:0 auto 75px auto;float:none;display:block}
    
    #footer {padding:38px 0 90px 0;}
    #footc {line-height:250%}  
    #footc>*, #footc a {font-size:14px;}  
    #footer h5 {margin-top:35px;;min-height:33px;}  
    
    #llistahores {overflow:auto;width:85%} 
    .txthOsteo {display:inline-block;width:70%;vertical-align:middle;outline:0px red solid}
    .seuhOsteo {text-align:left;font-size:16px;}
    .nomhOsteo {text-align:left;margin:10px 0 5px 0;font-size:20px}
    .ilOsteo {width:97%;height:auto;margin:0 1%;padding:5px 0 5px 1%;display:block;border-top:1px dotted} /*float:left; width:23%;*/
    .fothOsteo {width:20%;height:auto;border:5px #fff solid;margin-right:3%;display:inline-block;vertical-align:middle;outline:0px cyan solid} 
    .botoForm.breserva {display:block;margin:10px auto 0 auto;width:126px}  
    
    .puntSld {width:10px;margin-right:15px}     
    
    .ampcont {margin-top:122px}
}

@media only screen and (min-width: 481px) {
    body {
        font-size:18px;    
    }    
    .g1 {width:50%}
    .g1f {width:99%}
    .g2f {width:50%;margin:0;min-width:0}    
     
    .visp   {display:none !important}
    .vism   {display:block !important}
    .visg, .visgi   {display:none !important}
    .hidp   {display:block !important}
    .hidpi  {display:inline-block !important}
    .hidm   {display:none !important}
    .hidg   {display:block !important} 
    .hidgm  {display:block}
    
    .menIdis {
        height: 30px;
        font-size:15px
    }
    .lidi {
        margin-left:35px;
        padding-top:5px;        
    }    
    
    .capca {height:90px}
    .logo {padding-top:20px;/*width:25%*/} 
    .menSup{padding-top:30px}    

    .mainTitP{ padding-top:40px;padding-bottom:25px;padding-left:0px;text-align:center;font-size:40px;}
    #nomPac {padding-top:15px;padding-bottom:10px;font-size:40px}
    
    .mainsize {padding:0 3%;width:94%}
    .WrapCont {margin-bottom:70px}
    .preCont {padding-top:75px;padding-bottom:30px;border-bottom:2px dotted}
    .preContL {float:left;width:40.5%;margin-left:5%;margin-bottom:20px;text-align:left}
               
    .preContR {float:right;width:54%;margin-right:0%;}
               
    .preContR p, .preContR h2 {padding-left:0px;} 
    
    .iconpag {float:none;max-width:none;margin:0;margin-bottom:0px}
    .iconSec {margin:0;max-width:200px}    

    /*.cSlogan {max-width:225px}*/
    #slogan {font-size:27px;}
    
    .fotoSecre {width:48%;float:left;display:inline-block;text-align:center;margin-top:0px;margin-bottom:0}
    .secresL {width:100%;float:none;margin-bottom:65px;padding-left:5%} 
    .secresR {width:100%;float:none;}     
    .Hcitaon {float:right;width:48%;padding-top:80px;padding-bottom:0px;padding-left:2%;}     
    .telfhores {font-size:50px;padding-top:5px}    

    .titCentre {margin-left:0px}
    .centreR {width:54.6%;float:right;margin-left:0px}
    .Icentre {margin:0 10% 110px 10%;float:none;width:auto}
    .centreL {width:40.5%;float:left}  
    #Wcentre {margin-bottom:35px;margin-top:75px} 
    
    .seuCent {padding-top:75px;padding-bottom:40px}
    .seus {padding-top:50px;}
    .Ionsom {padding-left:6%;width:35%;max-width:200px;text-align:left;float:left;} 
    .adreca {width:54%;float:right;padding-left:0px;text-align:left} 
    
    .cOsteos {margin:50px 5% 40px 5%;}
    #cvOst {top:135px;max-width:706px}
    .ctxtcvost {float:right;width:57.6%;overflow:auto;height:100%}
    .fotocvost {float:left;width:35.5%}
    .contocv {top:12.7%;left:5.2%;bottom:6.1%;right:5.2%;}  
    .wcvost {overflow:hidden} 
    .txtcvoS {text-align:left}
    
    .blogR {width:auto;padding:0 6.5%;float:none;}
    .Wblog {margin-top:30px;margin-bottom:70px;}
    .obrePost {margin:20px 0 40px 0}
    .cBlog {margin-bottom:50px}
    #blResp {margin-top:0px}
    
    .contTractem {float:none;width:auto}
    
    .WserveisI {padding:50px 0 20px 0;width:100%;}
    .WserveisP {padding:70px 0 35px 0;width:100%;}
    .servei4, .servei3 {float:left;width:32%;padding:0 9%;margin-bottom:40px;}
    
    .tmesnotis {font-size:19px;width:350px;} 
    .imgunoti {width:43.5%}
    .dataunoti {font-size:39px;}
    .wtxtunoti {width:43%;}

    .Wpubli {padding-top:30px}
    #cimgmobil {width:146%;margin-left:-17%;margin-right:0}
    #imgMobil {display:block;width:100%;} 
    
    .CimgEntrada {width:40%;min-height:540px;display:inline-block;position:relative;text-align:left;} 
    .imgEntrada {bottom:70px;right:15%;position:absolute;margin:0;max-height:450px;width:auto;display:block;}
    .imgEntradaP {display:none;}
    #registre {width:59%;margin-left:0;margin-bottom:50px;margin-top:25px}
    #login_p, #login_u {width:59%;max-width:none;margin-left:0;margin-top:60px;margin-bottom:0}
    .inpFormL {width:100%;float:none}
    .inpFormR {width:100%;float:none}  
    
    #footer {padding:0px 0 65px 0;}
    #footc {line-height:160%;}
    #footc>*, #footc a {font-size:18px;}  
    #footer h5 {margin-top:45px;;min-height:40px;} 
    
    .mainTitP{ padding-top:48px;padding-bottom:18px;padding-left:5px;text-align:center;font-size:50px;}
    
     #llistahores {overflow:auto;width:87%}
    .txthOsteo {display:block;width:100%;outline:0px red solid}
    .seuhOsteo {text-align:center;font-size:18px}
    .nomhOsteo {text-align:center;margin:15px 0 10px 0;font-size:25px}
    .ilOsteo {width:170px;height:260px;margin:20px 2%;padding:0;text-align:center;display:inline-block;vertical-align:top;border:none} /*float:left; width:23%;*/
    .fothOsteo {width:95%;max-width:130px;height:auto;border:10px #fff solid;margin:0 auto}    
    .botoForm.breserva {display:inline-block;margin:10px auto 0 25px;width:auto} 
    
    .puntSld {width:12px;margin-right:15px} 
    
    .ampcont {margin-top:120px}
}


@media only screen and (min-width: 769px) { 
    body {
            font-size:18px;
    }
    .g1,.g1-4 {width:25.0%}
    .g2 {width:48.0%}
    .g3 {width:73.0%}
    .g4 {width:98.0%}  
    .g33 {width:31.3%} 
    .g66 {width:64.7%}
    .g2a {width:50%;margin:0;}
    .g1f {width:49%;float:left;min-width:0}
    .g2f {width:50%}

    .visp   {display:none !important}
    .vism   {display:none !important}
    .visg   {display:block !important}
    .visgi  {display:inline-block !important} 
    .hidp   {display:block !important}
    .hidpi  {display:inline-block !important}
    .hidm   {display:block !important}
    .hidg   {display:none !important}  
    .hidgm  {display:none !important}
    
    .mainsize {padding:0 2%;width:96%}
    .menIdis {
        height: 24px;
        font-size:13px
    } 
    .lidi {
        margin-left:30px;
        padding-top:3px;        
    }    
    
    /*.cSlogan {max-width:400px}*/
    #slogan {font-size:45px;}
        
    .WserveisI {padding:80px 0 90px 0;width:100%}
    .WserveisP {padding:80px 0 70px 0;width:100%}
    .servei4 {float:left;width:20%;padding:0 2.5%;margin-bottom:0;}
    .servei3 {float:left;width:25%;padding:0 4.1%;margin-bottom:0;}
    
    .tmesnotis {font-size:25px;width:500px;}  /* margin-right:30%; */
    .imgunoti {width:27.7%}
    .dataunoti {font-size:50px;}
    .wtxtunoti {width:61%;}
    
    .Wpubli {padding-top:80px}
    #cimgmobil {width:auto;height:auto;margin:0}
    #imgMobil {display:block;width:155%;margin-left:-14%;}
    
    #footer {padding:30px 0 65px 0;}
    #footc {line-height:160%;}
    #footc>*, #footc a {font-size:18px;}     
    
    .mainTitP{ padding-top:70px;padding-bottom:23px;font-size:50px;text-align:center}  /*padding-left:35.6%;text-align:left;*/
    #nomPac {padding-top:15px;padding-bottom:10px;font-size:50px}
    
    .titCentre {margin-left:0px}
    .centreR {width:66.7%;float:right}
    .Icentre {margin-bottom:95px;float:none;width:auto}
    .centreL {width:25%;float:left}
    #Wcentre {margin-bottom:110px;margin-top:73px}

    .contTractem {float:right;width:69.5%;margin-right:8%}

    .WrapCont {margin-bottom:70px}
    .preCont {padding-top:75px;padding-bottom:50px;border-bottom:2px dotted}
    .iconpag {float:none;max-width:none;margin:0;margin-bottom:0px}
    .iconSec {margin:0 auto;max-width:200px}
    
    .preContL {float:left;width:23.6%;margin:0;text-align:center}
    .preContR {float:right;width:70.5%;margin:0;margin-right:4%}
    .preContR p, .preContR h2 {padding-left:0px;} 

    .secresL {width:38%;float:left;margin-bottom:0;padding-left:4%} 
    .secresR {width:49%;float:right;} 
    .fotoSecre {width:48%;float:left;display:inline-block;text-align:center;margin-bottom:0}
    .Hcitaon {float:right;width:48%;padding-top:80px;padding-bottom:0px;padding-left:2%;}
    .telfhores {font-size:50px;padding-top:5px}
    
    .Ionsom {padding-left:26%;width:25%;max-width:200px;text-align:left;float:left;}
    .adreca {width:49%;float:right;}
    
    .cOsteos {margin:105px 5% 40px 5%;}    
    #cvOst {top:120px;max-width:1215px}
    .ctxtcvost {float:right;width:74.4%;overflow:auto;height:100%}
    .fotocvost {float:left;width:22.4%}
    .contocv {top:14.5%;left:5.8%;bottom:9%;right:5.8%}
    .wcvost {overflow:hidden}
    .txtcvoS {text-align:left}
    
    .blogR {width:66%;padding:0;float:right;}
    .Wblog {margin-top:60px;margin-bottom:70px;}
    .obrePost {margin:40px 0}
    .cBlog {margin-bottom:80px}
    #blResp {margin-top:-50px}
    
    .CimgEntrada {width:51%;min-height:540px;display:inline-block;position:relative;text-align:left}
    .imgEntrada {bottom:70px;right:15%;position:absolute;margin:0}
    #registre {width:46%;margin-left:0;margin-bottom:0;margin-top:85px;}
    #login_p, #login_u {width:31%;max-width:none;margin-left:0;margin-top:85px;margin-bottom:0}
    .inpFormL {width:48%;float:left}
    .inpFormR {width:48%;float:right}
    
    #llistahores {overflow:hidden;width:88%}
    .seuhOsteo {text-align:center;}
    .nomhOsteo {text-align:center;margin:15px 0 10px 0}
    .ilOsteo {width:170px;height:260px;margin:20px 2%;text-align:center;display:inline-block;vertical-align:top;} /*float:left; width:23%;*/
    .fothOsteo {width:95%;max-width:130px;height:auto;border:10px #fff solid;}    
    
    #footer h5 {margin-top:45px;;min-height:40px;}   
    
    .puntSld {width:16px;margin-right:20px} 
    
    .ampcont {margin-top:114px}
}