/*===== CHANGES =======*/
nav {z-index: 100!important;}
.head-content, .container_12 {  
	margin: 0 auto;
	width: 90%;
	max-width: 960px;
}
#gratuito {
    font-weight:lighter;
    border-bottom: 4px solid rgb(71, 71, 71);
}
.container_12  .grid_5 {
	margin: 0 auto;
	width: 30%;
	float: left;
	max-width: 960px;
	margin-left: 10px;
	margin-right: 10px;
}
#contenedorLogo {width: auto;}
#derecho-logo {
    position: absolute;
    top: 15px;
    right: 17px;
}
#contenedorLogo > a > h1 {margin-left: 0px;}
.toggle-nav {
    display:none;
    z-index: 1000;
}
.container_12 .grid_12 {max-width: 960px; width: 100%;}

#breadcrumbs {
    padding-left: 7px;
    bottom: 25px;
    position: relative;
}
#breadcrumbs a {
    margin-bottom: 0px;
}
#breadcrumbs #current-page {text-decoration: none; cursor: auto;}
#breadcrumbs img {
    width:15px!important;
    height:15px!important;
    padding: 3px!important;
    display: inline-block!important;
}
#pags {
        float: left;
        margin: 0 auto;
        position: relative;
        top: 75px;
        left: 426px;
}
/*===== RESPONSIVE =====*/
/*HEADER*/
@media screen and (max-width: 1065px) {
	.head-content {
		width: 90%;
	}
	.container_12 {
		width: 95%;
	}
	/*nav*/
	ul.sf-menu > li.marg2 {margin-left: 0px;}
}
@media screen and (min-width: 1024px) {
	#contenedorLogo {
			float: left;
			width: 50%;
			margin: 0 auto;
	}
    #derecho-logo img {width: 130px!important;}
	.rightblock {margin-top: 60px;}
}
@media screen and (max-width: 800px){
	img {height: 150px;}
    #derecho-logo img {width: 110px; height: auto!important;}
	.toggle-nav {
		left: -98px;
		top: 148px;
	}
	.menu2 ul {left: -109px;}
    #breadcrumbs {
        bottom: -1px!important;
        position: relative;
        margin-bottom: 20px;
    }
}
@media screen and (max-width: 720px) {
	#contenedorLogo, .rightblock {
		float: right;
	}
	.rightblock {margin-top: 10px;}
    .classname {margin-top: 95px;}
}
@media screen and (max-width: 640px) {
	#contenedorLogo, .rightblock {
		float: right;
	}
	#contenedorLogo > a > h1 {margin-left: 35px;}
	.logo {
		width: 100%;
		max-width: 100px;
	}
	img {
		width: 100px;
		height: auto;
	}
    #derecho-logo img {display: inherit;}
	.rightblock {margin-top: 10px;}
    .classname {margin-top: 10px;}
}
@media screen and (max-width: 520px) {
	.head {height: auto;}
	img {display: none;}
	#contenedorLogo {width: 100%;float: left;}
	#contenedorLogo a {float: none;}
	#contenedorLogo > a > h1 {margin-left: 0px;}
    #derecho-logo {right: -17px!important; top:106px;}
	.title {
		width: 100%!important;
		display: block!important;
		text-align: center;
		line-height: 1em;
	}
	.rightblock {
		margin: 0 auto;
		width: 100%;
		margin-top: 10px;
		text-align: center;
	}
	#s4 > div {width: 90% !important;}
	#form textarea {width: 95% !important;}
	.btns {width: 95%;}
    .classname {margin-top: -6px;}
}
@media screen and (max-width: 440px) {
    #derecho-logo {top:120px;right: -15px!important;}
}
@media screen and (max-width: 390px) {
	.rightblock{margin-top: 50px;display: block;}
	#contenedorLogo a h1 {font-size: 38px;}
	#form textarea {width: 95% !important;}
	.btns {width: 95%;}
	#form input {width: 95%; margin-bottom: 10px;}
    #derecho-logo {top:160px;}
}
/* NAV */
@media screen and (max-width: 1024px) {
	.menu {width: 90%; padding-left: 25px;}
	nav {margin-top: 0px;  margin-right: 1px; margin-left: 1px;}
	ul.sf-menu {
		width: 100%;
		float: none;
		margin: 0 auto;
	}
	ul.sf-menu > li {
		width: 100px;
		height: 220px;
		margin-top: 40px;
		background-image: none;
	}
    #derecho-logo {
        position: absolute;
        right: 2px;
    }
}
@media screen and (max-width: 890px) {
	ul.sf-menu > li {
		width: 80px;
	}
	ul.sf-menu > li  {font-size: 10px!important;}
}
/*JS Slider*/
@media screen and (max-width: 1024px) {
    #pags {
        float: left;
        margin: 0 auto;
        width: 300px;
        position: relative;
        left: 384px;
    }
    .s4 {right: 40px;}
    #derecho-logo img {width: 110px!important;}
}
@media screen and (max-width: 960px) {
	.text-1 {
		width: 90%!important;
		font-size: 40px;
		line-height: 0px;
		padding-left: 20px;
	}
	.text-2 {display: none;}
	#pags {
        float: left;
        margin: 0 auto;
        width: 300px;
        position: relative;
        top: 50px;
        left: 390px;
	}
	.head {
		height: 560px;
	}
    .s4 {right: 20px;}
}
@media screen and (max-width: 890px) {
	.text-1 {
		width: 80%!important;
	}
    #pags {left: 350px;}
}
@media screen and (max-width: 520px) {
	.text-1 {
		margin-left: -50px;
	}
}
/*TOGGLE MENU*/
@media screen and (max-width: 800px) {
    header{overflow: visible;}
    nav {float: none;}
    .head-content > #pags, #s4 {display: none;}
    .head {height: 220px;}
	#content {border-top: 2px solid rgb(109, 179, 250);}
    .menu2 {
        position:relative;
        display:inline-block;
    }
	.wrapper:first-child {overflow: visible;}
    .menu ul.active {
        display:none;
    }
    .menu2 ul {
        width: 225px;
        position:absolute;
        top: 349%;
        left:-110px;
        padding:10px 18px;
        box-shadow: 0px 1px 20px 5px rgba(0,0,0,0.35);
        border-radius:3px;
        background:#EDEDEE;
		text-align: center;
    }
    .menu2 ul:after {
        width:0px;
        height:0px;
        position:absolute;
        top:0%;
        left: 30px;
        content:'';
        transform:translate(0%, -100%);
        border-left:7px solid transparent;
        border-right:7px solid transparent;
        border-bottom:7px solid #EDEDEE;
		z-index: 2 !important;
    }
    .menu2 li {
        margin:5px 0px 5px 0px;
        float:none;
        display:block;
    }
 
    .menu2 a {
        display:block;
    }
    .toggle-nav {
        position: relative;
        left: -98px;
        top: 125px;
        padding:18px;
        display:inline-block;
        border-radius:50px;
        background:#378DE5;
        box-shadow:0px 3px 0px 0px rgba(0, 0, 0, 0.14);
        text-shadow:0px 2px 0px rgba(0, 0, 0, 0.15);
        color:#FFF;
        font-size:20px;
        transition:color linear 0.15s;
		text-decoration: none;
    }
    .toggle-nav:hover, .toggle-nav.active {
        text-decoration:none;
        color:#C2C2C2;
    }

	/*egg list*/
	ul.sf-menu > li {
		width: auto;
		height: auto;
		margin-top: 0px;
		padding: 0px 0px 0px 0px;
	}
	ul.sf-menu > li > a {
		background-image:none;
		width: 250px;
		height: 30px;
		text-align: left;
		margin-bottom: 10px;
	}
	ul.sf-menu>li.current>a, ul.sf-menu>li.sfHover>a, ul.sf-menu>li>a:hover {
		color: #D78B00;
	}
	ul.sf-menu>li.sfHover>a.sf-with-ul>span.sf-sub-indicator {display: none;}
	ul.sf-menu > li > a > span {
		margin-top: 13px;
		margin-bottom: 20px;
	}
	/*sublist "servicios"*/
	ul.sf-menu>li>ul {
		/*left: 10px;*/
		/*top: 45px;*/
		left: -18px;
		top: 45px;
		width: 240px;
		padding: 10px;
        background-color:#EDEDEE;
	}
	ul.sf-menu>li>ul>li, ul.sf-menu>li.sfHover>ul>li {width: auto;}
	ul.sf-menu>li.sfHover>ul>li>a {
		font-family: 'Emilys Candy', cursive;
		font-size: 17px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
    ul.sf-menu>li.sfHover>ul>li>a:hover {
        color: #D78B00;
        background-color: rgba(0,0,0,0);
    }
}
@media screen and (max-width: 720px) {
	.toggle-nav {top: 185px;}
	.menu2 ul { 
		top: 459%;
		left: -110px;
	}
}
@media screen and (max-width: 640px) {
	img {display: none;}
    .head {height: 125px!important;}
    .toggle-nav {
        position: inherit;
        left: 0px;
        top: 0px;
		margin-top: 100px;
    }
     .menu2 ul {
        top:110%;
        left:-9px;
     }
}
@media screen and (max-width: 520px) {
	.toggle-nav {
		margin-top: 0px;
	}
	.menu2 ul {
        top:127%;
        left:-9px;
    }
}
@media screen and (max-width: 440px) {
    .head {height: 140px!important;}
    .toggle-nav {
		margin-top: 15px; 
		margin-bottom: 10px;
        position: inherit;
    }
	.menu2 ul {
        top:106%;
        left:-9px;
    }
}
@media screen and (max-width: 390px) {
    .head {height: 180px!important;}
}


/*BODY CONTENT*/
@media screen and (max-width: 960px) {
	.container_12  .grid_5 {
		width: 45%;
	}
	.special {
		width: 95%!important;
	}
	.special h2 {
		padding-top: 30px;
	}
	.marg5 {margin-top: 0px;}
}
@media screen and (max-width: 720px) {
	.container_12  .grid_5 {
		width: 95%;
	}
	.container_12 .grid_5 .marg6, .marg9 {margin-bottom: 20px;}
	.marg5{margin-top: 0px; margin-bottom:0px;}
}


/*FOOTER*/
#toTop {left: 80%;}
@media screen and (max-width: 1024px) {
	footer .container_12 .grid_6, .grid_2, .grid_4 {
		width: 100% !important;
		margin: 0 auto!important;
	}
	footer > .container_12 > .grid_6 > .line-3, .line-2 {display: none;}
	footer > .container_12 > .grid_6 > .text-5 {width: 100%; margin: 0 auto; margin-top: 10px; text-align: justify;}
	footer .container_12 .grid_6 > h3 {width: 95%;}
	footer .container_12 .grid_6 > .box-1 { width: 40%; margin: 0 auto; margin-top: 20px!important;}
	footer .container_12 .grid_6 > .box-1 > .num {width: 100%; text-align: left; padding-left: 5px;}
	footer .container_12 .grid_6 > .marg11 {margin-right: 15px; margin-left: 5%;}
	footer .container_12 .grid_12, footer .container_12 .line-1 {max-width: 940px; width:100%;}
}
@media screen and (max-width: 720px) {
	footer .container_12 .grid_6 > .box-1 { width: 100%; margin: 0 auto; margin-top: 15px!important;}
}