/*******************************************
por etiqueta
******************************************/

html, body{
    margin:0;
    padding:0;
}



article{
    width:1100px;
    margin:0 auto;
}

/*******************************************
generales
*******************************************/

a.botonFalso{
   float:right;
    width:200px;
    padding:10px;
    margin-top:-6px;
    border-radius:10px;
    border:none;
    font-size:16px;
    font-family: arial;
    background-color: #EF8B3D;
    color:#ffffff;
    text-align: center; 
    text-decoration: none;
}

a.botonFalso:hover{
    background-color: #E3752E;
}

.puntos li {
    color: #2887BA;
}
  
.puntos li span {
    color: #515151;
}

/**************** mi header ***************************/
#miHeader{
    height:120px;
    background: linear-gradient(to top, #FBF6E9 10px, #FFFFFF 10px);
    padding-top:20px;
}

#logoHeader{
    float:left;
}

#telefonoHeader{
    float:right;
    width:220px;
    max-height:35px !important;
    margin-top: 20px;
    background-color: #FBF6E9;
    border-radius:0 25px 25px 0;
}

#telefonoHeaderIcon{
    float: left;
    width:50px;
    height: 50px;
	background-color:#2887BA;
	border-radius:25px;
    margin-top: -7px;
    margin-left: -10px;
    box-shadow: 2px 2px 4px rgba(0,0,0, .5);
}

#telefonoHeaderIcon p{
    margin-top:0px;
    padding:10px 0 0 13px;
    color:#ffffff;
    font-size: 28px;
}

#telefonoHeaderNumber{
    margin-top:-15px;
}

#telefonoHeader a{
    color:#2887BA;
    font-family: 'BebasKai-Regular';
    font-size: 28px;
    text-decoration: none;
}


#telefonoHeaderNumber{
    float:left;
    padding-right:10px;
    padding-left:10px;
}

#mailHeader{
    white-space:nowrap;
    clear:left;
    font-family: 'ShreeDev0714';
    font-size: 14px;
    color:#2887BA;
}

#mailHeader a{
    font-family: 'ShreeDev0714-Bold';
    font-size: 14px;
}

/******************** mi banner ***********************/

#miBanner{
    background-color: #2887BA;
    background-image: url('../images/anuncios-en-google-adwords.jpg');
    background-size: cover;
    background-position: top;
    background-attachment: fixed;
    height:600px;
}

#miSoftware #miBanner{
    background-color: #2887BA;
    background-image: url('../images/desarrollo-software.jpg');
    background-size: cover;
    background-position: top;
    background-attachment: fixed;
    height:630px;
}

#miBannerAPPs{
    background-color: #2887BA;
    background-image: url('../images/apps.png');
    background-size: cover;
    background-position: top;
    background-attachment: fixed;
    height:650px;
}

#miBannerHospedaje{
    background-color: #2887BA;
    background-image: url('../images/hospedaje.jpg');
    background-size: cover;
    background-position: top;
    background-attachment: fixed;
    height:650px;
}

#miBannerCorreoCorp{
    background-color: #2887BA;
    background-image: url('../images/correo-corporativo.jpg');
    background-size: cover;
    background-position: top;
    background-attachment: fixed;
    height:650px;
}

#miBannerDesarrolloWeb{
    background-color: #2887BA;
    background-image: url('../images/desarrollo_web.jpg');
    background-size: cover;
    background-position: top;
    background-attachment: fixed;
    height:650px !important;
}

#miBannerInfo{
    float:left;
    height:100%;
    width:50%; 
}

#miBannerEncabezado{
    max-width:700px !important;
    margin-top:30px;
    background-color: rgba(255, 255, 255, 0.6);
    padding:20px 50px 30px 30px;
    color:#ffffff;
    font-family: 'ArialRoundedBold';
    font-size: 38px;
    line-height: 32px;
    border-radius:70px;
    display:inline-block;
}

#miBannerFacebook{
    background-color: #2887BA;
    background-image: url('../images/anunciate-en-facebook.jpg');
    background-size: cover;
    background-position: top;
    background-attachment: fixed;
    height:600px;
}
.desarrolloWeb{
    font-size: 28px !important;
}

#miBannerEncabezado img{
    vertical-align: middle;
}

#miBannerEncabezado{
	    padding-left:44px;
	}

#miBannerDescripcion{
    max-width:700px !important;
    margin-top:30px;
    margin-left:44px;
    color:#ffffff;
    font-family: 'ShreeDev0714';
    font-size: 20px;
    line-height: 32px;
    text-shadow: 2px 2px 4px rgba(0,0,0, .5);
}

#miBannerLista ul{
    max-width:700px !important;
    list-style-type: none;
    font-family: 'ShreeDev0714';
}

#miBannerLista li{
    color:#ffffff;
     font-family: 'ShreeDev0714-Bold';
    font-size: 22px;
    line-height: 24px;
    text-shadow: 2px 2px 4px rgba(0,0,0, .5);
}

#miBannerLista li img{
    float: left;
    vertical-align: middle;
     margin-left: -30px;
    margin-right: 7px;
}

#miVideoDesarro{
    width:480px !important;
    padding-left:44px;
}

#miVideoDesarro video{
    width:480px !important;
}

.miVideo-desarrolloWeb{
    height:860px !important;
}

.miVideo-Apps{
    height:770px !important;
}

/*********************************************************/

#miBannerForm{
    float: right;
    height:100%;
    background-color: #ED893D;
    padding:20px;
    border-radius:50px;
    width:350px;
}

#miBannerForm p{
    color: #ffffff;
    font-family: 'ShreeDev0714-Bold';
    font-size:28px;
    text-align: center;
    padding:0 auto;
    margin:0px 0px 15px 0px;
}

#miBannerForm p:last-child{
    font-size:14px;
    margin-bottom:15px;
}

#miBannerForm p a{
    color:#2887BA;
    text-decoration: none;
}

#miBannerForm p a:hover{
    text-decoration: underline;
}



#miBannerForm input,textarea{
    display:block;
    width:330px;
    padding:10px;
    border-radius:10px;
    margin-bottom: 15px;
    border:none;
    font-size:16px;
    font-family: arial;
    color:#2887BA;
}


::-webkit-input-placeholder { color: #2887ba; } /* WebKit */
:-moz-placeholder { color: #2887ba; } /* Firefox 18- */
::-moz-placeholder { color: #2887ba; } /* Firefox 19+ */
:-ms-input-placeholder { color: #2887ba; } /* IE 10+ */


#miBannerForm textarea{
   height:100px;
}


#miBannerForm button{
    display:block;
    width:260px;
    padding:10px;
    border-radius:10px;
    margin-left: 35px;
    margin-bottom:25px;
    border:none;
    font-size:22px;
    font-family: arial;
    background-color: #2887BA;
    color:#ffffff;
    text-align: center;
}

#miBannerForm button:hover{
    background-color: #1e678e;
}

#miBnnerFormFlecha{
    width:137px;
    height:39px;
    float:left;
    position: absolute;
    z-index: 100;
    margin:507px auto auto -70px;
}

#miBnnerFormFlecha img{
    width:137px;
    height:39px;
}
/*******************************************/

#miVideo{
    height:770px;
}

#miSoftware #miVideo{
    height:800px;
}

#miVideoHospedaje{
    height:870px;
}


#miVideoCorreoCorp{
    height:840px;
}

.miVideo-anuncios-facebook{
    height:780px !important;
}

#miVideoParteSuperiorLeft{
    float:left;
    position:relative;
    max-width: 50%;
}

#miVideoParteSuperiorLeft p:nth-child(1){
    font-family: 'ArialRoundedBold';
    color:#2887BA;
    font-size: 32px;
    margin-bottom: 20px;
    padding-left: 43px;
}

#miVideoParteSuperiorLeft p:nth-child(2){
    font-family: 'ShreeDev0714';
    color:#515151;
    font-size: 18px;
    margin-bottom: 20px;
    padding-left: 43px;
}

#miVideoParteSuperiorLeft p:nth-child(3){
    font-family: 'ShreeDev0714';
    color:#1e678e;
    font-size: 16px;
    margin-bottom: 20px;
    padding-left: 43px;
}

#miVideoParteSuperiorLeft ul{
    list-style-type: none;
}

#miVideoParteSuperiorLeft ul>li>p{
    font-family: 'ShreeDev0714' !important;
    color:#515151 !important;
    font-size: 18px !important;
    padding: 5px 0 0 3px !important;
    min-height:26px !important;
}

#miVideoParteSuperiorLeft_checks li img{
    float:left;
    vertical-align: middle;
    margin-left: -30px;
    margin-right:7px;
}

#buenasManos{
    width:359px;
    margin:50px auto;
}

#buenasManos p:nth-child(1){
    font-family: 'ShreeDev0714' !important;
    text-align:center;
    color:#8ABE55;
    font-size: 24px;
}


#buenasManos p:nth-child(3){
    font-family: 'ShreeDev0714' !important;
    text-align:center !important;
    color:#515151 !important;
    font-size: 14px;
}

.buenasManosDesarro img{
    margin-left: 43px;
}

#miVideoParteSuperiorRight{
    float:right;
    position:relative;
    margin-top: 20px;
    max-width:480px !important;
}

#videoContainer{
    width:480px;
    background-color: #8ABE55;
    border-radius:50px 50px 20px 20px;
}

#videoContainer video{
    width:480px;
    margin-bottom: 15px;
}

#videoContainer p{
 font-family: 'Arial';
    color:#ffffff;
    font-size: 28px;
    padding-top:10px;
    margin: 0px auto 5px auto;
    text-align:center;
    border-radius:0px 50px 20px 20px;
}


/***********************/

#miVideoFlecha{
    width:120px;
    height:54px;
    float:left;
    position: absolute;
    z-index: 100;
    margin-top: 690px;
    margin-left: 100px;
}

#miVideoFlecha .faceFlecha{
    margin-top: 1010px !important;
    margin-left: 100px;
}

#miSoftware #miVideoFlecha{
    margin-top: 720px;
}
#miVideoHospedaje #miVideoFlecha{
    width:120px;
    height:54px;
    float:left;
    position: absolute;
    z-index: 100;
    margin-top: 790px;
    margin-left: 100px;
}

#miVideoFlechaDesarro{
    width:120px;
    height:54px;
    float:left;
    position: absolute;
    z-index: 100;
    margin-top: 750px;
    margin-left: 100px;
}

#miVideoCorreoCorp #miVideoFlecha{
    margin-top: 760px;
}

/***********************/

#clientesContainer{
    width:  80%;
    margin:80px auto 0 auto;
    column-width:50%;
    column-gap:15px;
}

#clientesContainer p{
    background-color: #2887BA;
    font-family: 'ShreeDev0714';
    font-size: 24px;
    color:#ffffff;
    text-align:center;
    padding:12px 0 10px 0 !important;
    border-radius:20px;
}

#clientesContainer img{
    max-width:35%;
    height:auto;
    float: left;
    margin-bottom:10px;
    margin-left: 35px;
}


#clientesContainerDesarroWeb{
    width:  80%;
    margin:80px auto 0 auto;
    column-width:100%;
    column-gap:15px;
}

#clientesContainerDesarroWeb p{
    background-color: #2887BA;
    font-family: 'ShreeDev0714';
    font-size: 24px;
    color:#ffffff;
    text-align:center;
    padding:12px 0 10px 0 !important;
    border-radius:20px;
}

#clientesContainerDesarroWeb img{
    max-width:30%;
    height:auto;
    margin-bottom:10px;
    margin-left: 15px;
}

/******************** mi liston ***********************/

#miListon{
    background-color: #2887BA;
    height:60px;
}

#miListon p{
    color:#ffffff;
    font-family: 'ArialRoundedBold';
    font-size: 20px;
    margin-top:0px;
    padding-top: 18px;
    padding-right: 70px;
}

/********************** miSeisIconos *********************/

#miSeisIconos{
     display: flex;
-webkit-display: flex;
-moz-display: flex;
-ms--display: flex;
    flex-wrap: wrap;
    min-height:600px;
    margin:50px auto 80px auto;
}

#miSeisIconos div {
	width:300px;
    height:300px;
    padding:10px;
    margin:0px 0px 0px 40px;
    border:1px solid #fff;
}

#miSeisIconos div img{
	width:110px;
    height:auto;
    position:relative;
    margin:20px auto;
    display: block;
}

#miSeisIconos div p{
    font-family: 'ShreeDev0714';
    color: #515151;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
}

#miSeisIconos div span{
    font-family: 'ArialRoundedBold';
    color: #2887BA;
    font-size: 18px;
    margin-bottom: 10px;
    display:block;
}

#miSeisIconosFlecha{
    width:120px;
    height:54px;
    float: left;
    position: absolute;
    z-index: 100;
    margin-top: 670px;
    margin-left: 710px;
}

#seisApps #miSeisIconos{
    height:550px;
}

#miSoftware #miSeisIconosFlecha{
    margin-top: 670px;
}


#correoCorpSix #miSeisIconosFlecha{
    width:120px;
    height:54px;
    float: left;
    position: absolute;
    z-index: 100;
    margin-top: 670px;
    margin-left: 710px;
}

#miSeisIconosHospedaje #miSeisIconosFlecha{
    width:120px;
    height:54px;
    float: left;
    position: absolute;
    z-index: 100;
    margin-top: 660px;
    margin-left: 710px;
}

/********************** Footer *********************/
#miFooter{
    height:90px;
}

#logoFooter{
    float:left;
    height:60px;
    width:50%;
    margin-top:12px;
}

#logoFooter img{
    height:60px !important;
    width:auto;
}

#datosFooter{
    float:right;
    margin-right: 70px;
}

#datosFooter p{
    text-align: right;
    font-family: 'ShreeDev0714';
    font-size: 12px;
    color:#515151;
    margin:3px !important;
}

#datosFooter p:nth-child(1){
    margin-top:30px !important;
}

#datosFooter i{
    color:#2887BA;
}

#datosFooter a{
    color:#515151;
    text-decoration: none;
}

#datosFooter a:hover{
    color:#2887BA;
}

/************************************/
/*                                  */
/*  M E D I A  -  Q U E R I E S     */
/*                                  */
/************************************/

@media screen and (min-width: 720px) and (max-width: 1099px) {
    
 /**************************** ETIQUETA ****************************/     
    article{
        width:710px;
	}
 /**************************** GENERALES ****************************/     
    a.botonFalso{
	   margin-top: -8px !important;
	}		
 /**************************** HEADER ****************************/
    #miHeader{
        height:120px;
    }
    
    #telefonoHeader{
	    background-color:#FBF6E9;
	}
 /**************************** BANNER ****************************/      
    #miBanner{
	    height:700px;
	}	
    
    #miBannerFacebook{
        height:750px !important;
    }
    
    #miBannerCorreoCorp{
        height:850px;
    }
    
    #miBannerHospedaje{
        height:800px;
    }
    
    #miBannerInfo{
	   max-width: 384px !important;
	}
    
    #miBannerEncabezado{
	    max-width:300px !important;
	    padding:20px 10px 20px 30px;
	    font-size: 28px;
	    border-radius:40px;
	}
    
    #miBannerForm{
	    width:310px;
	}
    
    #miBannerForm input,textarea{
	    width:300px;
	}
    
    #miBnnerFormFlecha{
	    margin:520px auto auto -50px;	
	}
    
    #miBnnerFormFlecha img{
	    width:100px;
	    height:auto;
	}
    
    
    #miVideoFlechaDesarro{
        width:120px;
        height:54px;
        float:left;
        position: absolute;
        z-index: 100;
        margin-top: 950px;
        margin-left: 100px;
    }
    
    #miVideoDesarro{
    width:320px !important;
}

#miVideoDesarro video{
    width:320px !important;
}
    
    
    #miVideo{
	    height:880px;
	}
    
    #miSoftware #miVideo{
	    height:950px;
	}
    
    #miVideoHospedaje{
	    height:930px;
	}
    
    #miVideoCorreoCorp{
        height:950px !important;
    }
    
    #miVideoCorreoCorp #miVideoFlecha{
        margin-top: 860px;
    }
    
     .miVideo-desarrolloWeb{
        height:1040px !important;
    }
    
    .miVideo-Apps{
        height:920px !important;
    }
    
    .miVideo-Apps #miVideoFlecha{
        margin-top: 850px;
    }
    
    .miVideo-anuncios-facebook{
        height:900px !important;
    }
    
    #miVideoParteSuperiorLeft{
	    max-width: 359px;
	}
    
    #miVideoParteSuperiorLeft p:nth-child(1){
	    font-size: 28px;
	}
    
    #miVideoParteSuperiorLeft p:nth-child(2){
	    padding-right: 20px;
	}
    
    #miVideoParteSuperiorLeft p:nth-child(3){
	    padding-left: 0px;		
	}
    
    #miVideoParteSuperiorRight{
	    max-width:350px !important;
	}
    
    #videoContainer{
	    width:359px;
    }
    
    #videoContainer video{
	    width:359px;
	}
    
    #videoContainer p{
	    font-size: 22px;
	}
    
    #miVideoFlecha{
	    margin-top: 800px;
	}
    
    #miSoftware #miVideoFlecha{
	    margin-top: 870px;
	}
    
    #miVideoHospedaje #miVideoFlecha{
	    margin-top:850px;
	}
    
    #buenasManos{
	    width:359px;
	}
    
    #clientesContainer{
	    margin:0 auto;
	}
    
    #clientesContainer p{
	    font-size: 18px;
	}
/**************************** LISTON ****************************/ 
    #miListon p{
	    font-size: 16px;
	    padding-top: 20px;
	    padding-right: 0px;
	}
/**************************** SEIS ICONOS ****************************/
    #miSeisIconos{
	     margin:30px 0 80px 0;
    }
    
    #miSeisIconos div {
		max-width:290px !important;
		margin:5px 5px 5px 20px;
    }
    
    #miSeisIconosFlecha{
	   margin-top: 1015px;
	    margin-left: 400px;
	}
    
    #miSeisSoftware{
        height:1000px;
    }
    
    #miSoftware #miSeisIconosFlecha{
        margin-top: 950px;
    }
    
    #correoCorpSix #miSeisIconosFlecha{
    margin-top: 1020px;
    margin-left: 410px;
}
   
    #miSeisIconosHospedaje #miSeisIconosFlecha{
    margin-top: 1020px;
    margin-left: 410px;
}
    
    #seisApps #miSeisIconos{
        height:990px;
    }
/**************************** FOOTER ****************************/
    #logoFooter{
        display:block;
        text-align: left;
        height:60px;
        margin-top:12px;
    }
    
    #datosFooter{
	    margin-right: 0 !important;
	}	

}


/************************************/
/*                                  */
/*  M E D I A  -  Q U E R I E S     */
/*                                  */
/************************************/

@media screen and (min-width: 360px) and (max-width: 719px) {
    
 /**************************** ETIQUETA ****************************/     
    article{
        width:350px;
	}
 /**************************** GENERALES ****************************/     
    a.botonFalso{
	   margin-top: -8px !important;
	}		
 /**************************** HEADER ****************************/ 
    #miHeader{
        height:220px;
    }
    
    #logoHeader{
        width:230px;
        margin-left:50px;
    }		
            
    #telefonoHeader{
	    background-color:#FBF6E9;
        margin-right:70px;
	}
 /**************************** BANNER ****************************/      
    #miBanner{
	    height:1370px;
	}	
    
    #miSoftware #miBanner{
        height:1270px;
    }
    
    #miBannerHospedaje{
        height:1400px;
    }
    
    #miBannerFacebook{
        height:1370px !important;
    }
    
    #miBannerAPPs{
        height:1250px;
    }
    
    #miBannerCorreoCorp{
        height:1450px;
    }
    
    #miBannerDesarrolloWeb{
        height:1250px !important;
    }
    
    #miBannerInfo{
	   min-width: 100% !important;
        display:block;
	}
    
    #miBannerEncabezado{
	    max-width:300px !important;
	    padding:20px 10px 20px 30px;
	    font-size: 28px;
	    border-radius:40px;
	}
    
    #miBannerForm{
	    width:310px;
        padding:20px;
	}
    
    #miBannerForm input,textarea{
	    width:280px;
	}
    
    #miBannerForm button{
        margin:0 auto 15px auto !important;
    }		
    
    #miBnnerFormFlecha{
	    margin-left: -50px;	
	}
    
    #miBnnerFormFlecha img{
	    width:100px;
	    height:auto;
	}
    
    #miVideoDesarro{
    width:320px !important;
        margin:20px auto;
}

#miVideoDesarro video{
    width:320px !important;
}
    
    #miVideo{
	    min-height:1450px;
	}
    
    #miSeisSoftware{
       height:1955px; 
    }
    
    #miSoftware #miSeisIconosFlecha{
        margin-top: 1900px;
    }
    
    #miSoftware #miVideo{
	    min-height: 1680px;
	}
    
    
    #miVideoHospedaje{
	    height:1650px;
	}
    
    #miVideoCorreoCorp{
        height: 1720px;
    }
    
    .miVideo-desarrolloWeb{
        height:1820px !important;
    }
    
    .miVideo-Apps{
        height:1700px !important;
    }
    
    .miVideo-Apps #miVideoFlecha{
        margin-top: 750px;
    }
    
    #miVideoFlechaDesarro{
        width:120px;
        height:54px;
        float:left;
        position: absolute;
        z-index: 100;
        margin-top: 750px;
        margin-left: 10px;
    }
    
    #miVideoParteSuperiorLeft{
	    max-width: 359px;
	}
    
    #miVideoParteSuperiorLeft p:nth-child(1){
	    font-size: 28px;
        padding-left: 0px !important;
	}
    
    #miVideoParteSuperiorLeft p:nth-child(2){
	    padding-right: 20px;
	}
    
    #miVideoParteSuperiorLeft p:nth-child(3){
	    padding-left: 0px;		
	}
    
    #miVideoParteSuperiorRight{
	    max-width:350px !important;
	}
    
    #videoContainer{
	    width:359px;
    }
    
    #videoContainer video{
	    width:359px;
	}
    
    #videoContainer p{
	    font-size: 22px;
	}
    
    #miVideoFlecha{
	    margin-top: 515px;
	}
    
    #miVideoHospedaje #miVideoFlecha{
	    margin-top: 660px;
	}
    
    #buenasManos{
	    width:359px;
	}
    
    .buenasManosDesarro img{
    margin-left: 23px;
    }
    
    #clientesContainer{
	    margin:0 auto;
	}
    
    #clientesContainer p{
	    font-size: 18px;
	}
/**************************** LISTON ****************************/ 
     #miListon{
	    height:120px;
	}
    
    #miListon p{
	    font-size: 16px;
	    padding-top: 10px;
	    padding-right: 0px;
        text-align: center !important;
	}
    
    #miListon p a{
        
        position: relative;
        width:222px;
        margin-top:15px !important;
        margin-right: 50%;
        right:-120px !important;
    }		
/**************************** SEIS ICONOS ****************************/

    #miSeisIconos div {
        margin:0px 20px 0px 20px;
    }
    
    #miSeisIconosFlecha{
	   margin-top: 1960px;
	    margin-left: 100px;
	}
    
     #correoCorpSix #miSeisIconosFlecha{
    margin-top: 1950px;
    margin-left: 10px;
}
    
     #miSeisIconosHospedaje #miSeisIconosFlecha{
    margin-top: 1950px;
    margin-left: 110px;
}
    #seisApps #miSeisIconos{
        height:1920px;
    }
    
/**************************** FOOTER ****************************/
    #miFooter{
        height:150px;
    }
        
    #logoFooter{
        float:none;
        height:60px;
        width:100%;
        margin-top:12px;
        border: 1px solid transparent;
        text-align: center;
    }	
    
    #logoFooter img{
        height:60px !important;
        width:153px;
        margin:0 auto;
    }

    #datosFooter{
        width:100%;
	    margin-right: 0 !important;
	}	
    
    #datosFooter p{
        text-align: center;
	    font-size: 10px;
	}

}