/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Smaller than mobile */
@media (min-width: 320px) {
	#text-form {
		display: none; }
	#info-contrasena {
		display: none; }
	.browsers {
		display: none; }

	.header {
    	display: none; }
	.header-rsp {
    	border-bottom: 1px dotted #ccc;
    	text-align: center; }

    #pie {
		display: none; }
	.container {
		    margin-top: -50px;	}
	.content {
		padding: 0; }
	#content {
		background: none;
		border: none;
		width: 300px; }
	#content:after, #content:before {
		background: none;
		-webkit-transform: none;
		   -moz-transform: none;
		    -ms-transform: none;
		     -o-transform: none;
		        transform: none;
		border: none; }
	#content h1:before {
		background: none; }
	#content h1:after {
		background: none; }
	#content h1 {
    	font: bold 25px 'Montserrat', sans-serif;
    	line-height: 20px;
    	margin: 20px 0 20px; }
    #text-form2 {
    	font: 14px 'Montserrat', sans-serif;
    	color: rgb(163, 163, 163);
    	padding: 3px;
    	margin-bottom: 20px; }
    #button-login {
    	height: 40px;
    	width: 120px; }

   	/**/
    .info-col {
	    width: 95%;
	    left: auto;
	    right: auto; }

    .left-side {
    	position: static;
    	border: none; }

    .right-side {
 	   position: static; }  

 	 #other-services {
 	     margin-top: 80px;
 	     padding: 0;
 	     text-align: center; }
 	.servicios-list{
		padding-left: 25%; }

	#maservicios-desk {
    	display: none; }

    #maservicios-rsp {
    	display: block;
    	margin-top: -60px; }
}

/* Larger than mobile */
@media (min-width: 400px) {
	#text-form {
		display: none; }
	#info-contrasena {
		display: none; }
	.browsers {
		display: none; }

	.header {
    	display: none; }
	.header-rsp {
    	border-bottom: 1px dotted #ccc;
    	text-align: center; }

    #pie {
		display: none; }
	
	.content {
		padding: 0; }
	#content {
		background: none;
		border: none;
		width: 400px; }
	#content h1:before {
		background: none; }
	#content h1:after {
		background: none; }
	#content h1 {
    	font: bold 25px 'Montserrat', sans-serif;
    	line-height: 20px;
    	margin: 20px 0 20px; }
    #text-form2 {
    	font: 14px 'Montserrat', sans-serif;
    	color: rgb(163, 163, 163);
    	padding: 3px;
    	margin-bottom: 20px; }
    #button-login {
    	height: 40px;
    	width: 120px; }
    #maservicios-desk {
    	display: none; }

    #maservicios-rsp {
    	display: block;
    	margin-top: -60px; }

    .servicios-list{
		padding-left: 15%; }	
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {
	#text-form {
		display: none; }
	#info-contrasena {
		display: none; }
	.browsers {
		display: none; }

	.header-rsp {
    	border-bottom: 1px dotted #ccc;
    	text-align: center; }

    #content {
		background: none;
		border: none; }
	#content h1:before {
		background: none; }
	#content h1:after {
		background: none; }
	#content h1 {
    	font: bold 25px 'Montserrat', sans-serif;
    	line-height: 20px;
    	margin: 20px 0 20px; }
    #text-form2 {
    	font: 14px 'Montserrat', sans-serif;
    	color: rgb(163, 163, 163);
    	padding: 3px;
    	margin-bottom: 20px; }
    #button-login {
    	height: 40px;
    	width: 120px; }

    .list-heading {
		margin-top: 20px; }
	#maservicios-desk {
    	display: block; }

    #maservicios-rsp {
    	display: none; }
}

/* Larger than tablet */
@media (min-width: 750px) {
	#text-form {
		display: none; }
	#info-contrasena {
		display: none; }
	.browsers {
		display: none; }

	.header-rsp {
    	border-bottom: 1px dotted #ccc;
    	text-align: center; }

    .container {
		margin-top: 40px; 	}

    #content {
		background: none;
		border: none; }
	#content h1:before {
		background: none; }
	#content h1:after {
		background: none; }
	#content h1 {
    	font: bold 25px 'Montserrat', sans-serif;
    	line-height: 20px;
    	margin: 20px 0 20px; }
    #text-form2 {
    	font: 14px 'Montserrat', sans-serif;
    	color: rgb(163, 163, 163);
    	padding: 3px;
    	margin-bottom: 20px; }
    #button-login {
    	height: 40px;
    	width: 120px; }

    

	.servicios-list{
		padding-left: 20%; }
}

/* Larger than desktop */
@media (min-width: 960px) {
	#text-form {
		display: block; }
	#text-form2 {
		display: none; }
	#info-contrasena {
		display: block; }
	.browsers {
		display: block; }

	.header {
    	display: block; }
	.header-rsp{
		border: none; }
	#header-rsp {
    	display: none; }

    #pie {
		display: block; }
	#footer p{
		margin: 0;
		padding: 0; }
	.footer-rsp {
		display: none; }

	.container {
		margin-top: 60px; 	}

	#content {
		/*background: #f9f9f9; 
		border: 1px solid #c4c6ca; */}
	#content h1:before {
		background: -webkit-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
		background: -o-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
        background: -ms-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
        background: linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%); }
	#content h1:after {
		background: -webkit-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
		background: -o-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
        background: -ms-linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%);
        background: linear-gradient(right, rgba(126,126,126,1) 0%,rgba(255,255,255,1) 100%); }
    #content h1 {
    	font: bold 25px 'Montserrat', sans-serif;
    	margin: 10px 0 30px; }
    #button-login {
    	height: 45px;
   		width: 120px; }


   	/**/
   	.info-col {
   	    position: relative;
   	    float: left;
   	    min-height: 1px;
   	    padding-left: 10px;
   	    padding-right: 10px; }
   	.col8 {
   	    width: 55%; }
   	.col6 {
   	    width: 45%; }
   	.left-side {
   	    border-right: 2px dotted #ccc;
   	    height: 100%;
   	    text-align: center;	}
	.right-side {
	    position: absolute;
	    top: 0;
	    right: 0;
	    bottom: 0;
	    display: block; }

	 #other-services {
	    margin-top: 180px;
	    padding-left: 13%;
	    text-align: left; 	}



}

/* Larger than Desktop HD */
@media (min-width: 1200px) {
	#text-form {
		display: block;
		font-size: 17px; }
	#text-form2 {
		display: none }
	#info-contrasena {
		display: block;
		font-size: 17px; }
	.browsers {
		display: block; }	

	#other-services {
	    margin-top: 180px;
	    padding-left: 13%;
	    text-align: left; 	}
}