/*--------------------------
Author: Jenn Pereira
Author Website: PereiraDigitalMedia.com
Theme: Ophiuchus - Mobile Apps Landing Page
This is the CSS for Mobile Responsiveness of Ophiuchus Theme
--------------------------*/

/*--------------------------
-------- MIN 1920px --------
--------------------------*/
@media only screen and (min-width: 770px) {
    #home { height: auto; }     
    .home-bg { background-size: 100%; }
    } 

@media only screen and (min-width: 1920px){
    }

/*--------------------------
-------- MAX 1170px --------
--------------------------*/
@media only screen and (max-width: 1170px){
	#navigation{
	padding:0;

    }


  	}

/*--------------------------
-------- MAX 1024px --------
--------------------------*/
@media only screen and (max-width: 1024px){}

/*--------------------------
--------- MIN 970px --------
--------------------------*/
@media only screen and (min-width: 970px){
	#navigation .nav-menu{
	display:block !important;}
	}


/*--------------------------
--------- MAX 970px --------
--------------------------*/



@media only screen and (max-width: 970px){
	.menu-position{
		height:60px;
		display:block;
	}
	
	.nav-logo{
		padding-top:6px;
	}
	
	.nav-logo a.logo img{
		max-height:48px;
	}
	
	.nav-logo-danfoss{
		display:none;
	}
	
	#navigation .nav-menu{
		top:60px;
		margin:0;
	}
	
	.nav-menu ul.nav{
		display:block;
	}
	
	.nav ul{
		position:static;
		width:100%;
		border:0;
		border-radius:0;
		box-shadow:none;
	}
	
	#home.home-modern{
		padding-top:60px;
	}
	
	.hero-modern{
		min-height:560px;
	}
	
	.hero-overlay{
		background:linear-gradient(180deg, rgba(8,18,42,0.95) 0%, rgba(16,35,78,0.78) 62%, rgba(16,35,78,0.38) 100%);
	}
	
	.hero-content{
		padding:76px 20px 64px;
	}
	
	.hero-content h1{
		font-size:42px;
	}
	
	.hero-content p{
		font-size:16px;
	}
	
	.trust-grid,
	.service-grid,
	.capabilities-layout,
	.capability-list{
		grid-template-columns:1fr 1fr;
	}
	
	.trust-grid div{
		border-bottom:1px solid #e5e9f0;
	}
	
	.home-section{
		padding:58px 18px;
	}
	
	.capabilities-band{
		padding:62px 18px;
	}
	
	.cta-panel{
		align-items:flex-start;
		flex-direction:column;
		padding:30px;
	}
	
	.login-page{
		padding:112px 18px 56px;
	}
	
	.login-shell{
		grid-template-columns:1fr;
		gap:30px;
	}
	
	.login-copy h1{
		font-size:40px;
	}
	
	.carousel-indicators li, .carousel-indicators  .active {
		
		width: 20px;
		height: 20px;
		margin-left: 5px;
		margin-right: 5px;
		
		
		}
	
	form {
		
		padding-bottom:80px;
		
		}
	
	#work-with-us {
		
		display:none !important;
		
		}
	
	#home .carousel-inner{
	 -webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	width:100%;
	}
	
	#home {
   	 padding-top: 65px;
	
	}
	
	
    
    .anchor-link {
        display: block;
        visibility: hidden;
        margin-top: -58px;
        padding-top: 58px;
    }
    
    
    #navigation ul.nav li li a {
   		 border: none;
	     background-color: #c8c6c7;
    	color: #000000;
    }
    
    #navigation ul.nav ul {
        padding-left: 0;
       /* border-top: 1px solid #fff;*/
    }
    
    
    .nav li:hover > ul {
        display: none;

    }
    
    
    .nav ul {
        background-image: none;
    }
    
	#navigation a.mini-nav-button{
	display: block;}

	/* Mobile Nav Menu */

	.not-visible-nav{
	opacity:0;}

	#navigation .nav-menu{
	display:none;
	height: auto;
	top:100%;
	left:0;
	width:100%;
	position: absolute;
	background:rgba(255, 255, 255, 0.97) !important;
	box-shadow: 0px 1px 4px rgba(0,0,0, 0.1);
	background:#273893!important;}

	#navigation ul.nav li{
	display:inline-block;
	height:auto;
	width:100%;}

	#navigation ul.nav li a{
	display:block;
	height: auto;
	width:100%;
	padding:0 20px;
	color: #fff;
	/*border-top:1px solid #fff;*/
	line-height: 42px; text-decoration:none;
	
	
	-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
	
	
	
	}
	
	#navigation ul.nav li a:hover,
	#navigation ul.nav li a:focus,
	#navigation ul.nav li.active > a,
	#navigation ul.nav li.submenu-open > a{
		background:#eaf4ff;
		color:#101828;
		text-decoration:none;
	}
	
	#navigation ul.nav li.servicios{
		background:#273893;
	}
	
	#navigation ul.nav li.servicios > ul{
		position:static;
		display:none;
		width:100%;
		height:auto;
		padding:6px 10px 10px;
		background:#f4f7fb;
		border:0;
		border-radius:0;
		box-shadow:none;
	}
	
	#navigation ul.nav li.servicios.submenu-open > ul{
		display:block;
	}
	
	#navigation ul.nav li.servicios > ul li{
		display:block;
		width:100%;
	}
	
	#navigation ul.nav li.servicios > ul li a{
		padding:0 18px;
		color:#101828;
		background:#ffffff;
		line-height:40px;
		border-bottom:1px solid #e5e9f0;
		box-shadow:none;
	}
	
	#navigation ul.nav li.servicios > ul li a:hover,
	#navigation ul.nav li.servicios > ul li a:focus{
		color:#101828;
		background:#d9efff;
	}
#navigation ul.nav li:first-child a{
	
	 border:none;
	 }
	
	.nav-menu{
 
  margin-top:0px;
  }
	
	
	#myCarousel .carousel-caption{
		display:block;
		position:static; padding-left:20px; padding-right:20px}
		
	#myCarousel h3{
	color:#000; font-size:20px; text-shadow:none; margin-top:0; margin-bottom:8px;}	
	
#myCarousel p{
	color:#5e5e5e;
	font-size:15px;
	text-shadow:none;
	line-height:18px;
}

#myCarousel p.blanco{
 color:#5e5e5e;
}

#myCarousel .itemlast img{float:none;}
#footer{
	height:auto;
	padding-left:17%;
	padding-right:17%;
	
	}
#footer span span{display:none; width:auto;}
#footer span {width:100%; display:block}

article{padding:0px; padding-bottom:30px; }
article img, #bobinado article img, #alquiler article img{float:none; display:block; margin:auto; margin-bottom:15px; 

    width: 98%;
    height: auto;
	
	 }

.texto-desc{padding-top:20px; width:100%; box-sizing:border-box; float:none;}

.section-others li{
	display:block; width:100%; padding:5px 0}
.section-others ul{padding-left:10px;}

.content h1.titles{font-size:20px; text-align:left; }

.content{padding:0;
width:95%;
}
.carousel.content{padding:0;
width:100%;
}

.menu-position.content{padding:0}
#pgservicios #desing{padding-top:80px}
.section-others{margin-bottom:20px}
#pgservicios .nav ul{display:none;}
#pgservicios #navigation ul.nav li.servicios.submenu-open > ul{display:block;}

.clientes ul{padding:0; padding-bottom:30px; text-align:center;}
.clientes li{width:45%;}
.clientes li img{width:100%; height:auto}
.clientes.content, .content.trabaja{padding-top:80px}

.texto-big, .column-pic{ width:100%; box-sizing:border-box; float:none; display:block;}
.texto-big p, .texto-big{padding:10px}
.content.quienes-somos, .content.contacto{padding:0; padding-top:80px;}

	#navigation{
	background:#ffffff;
	padding-left:10px;
	
	}

	.header-top{
	height:60px;
	-webkit-box-shadow: 0px 8px 24px 0px rgba(16,24,40,0.12);
-moz-box-shadow: 0px 8px 24px 0px rgba(16,24,40,0.12);
box-shadow: 0px 8px 24px 0px rgba(16,24,40,0.12);


}
	
.form input.bton-enviar, form input, form textarea{ width:100%; float:none; display:block; margin:0px auto10px;}
form input.bton-enviar{margin-bottom:40px;}
p.requiredlabel{ float:none; width:100%; padding-left:0; padding-top:10px;}
form label{text-align:left;}	
	
}

/*--------------------------
--------- MAX 800px --------
--------------------------*/
@media only screen and (max-width: 800px){



  	}


/*--------------------------
--------- MAX 768px --------
--------------------------*/
@media only screen and (max-width: 768px){

	}


/*--------------------------
--------- MAX 640px --------
--------------------------*/
@media only screen and (max-width: 640px){
	.hero-modern{
		min-height:620px;
	}
	
	.hero-content h1{
		font-size:34px;
	}
	
	.hero-actions{
		display:block;
	}
	
	.btn-primary-modern,
	.btn-secondary-modern{
		width:100%;
		margin-bottom:10px;
	}
	
	.trust-grid,
	.service-grid,
	.capabilities-layout,
	.capability-list{
		grid-template-columns:1fr;
	}
	
	.trust-grid div,
	.trust-grid div:last-child{
		min-height:auto;
		border-left:0;
		border-right:0;
	}
	
	.section-heading h2,
	.capabilities-copy h2,
	.cta-panel h2{
		font-size:30px;
	}
	
	.service-card img{
		height:190px;
	}
	
	.login-page{
		padding-left:14px;
		padding-right:14px;
	}
	
	.login-copy h1{
		font-size:34px;
	}
	
	.login-card{
		padding:24px;
	}


  	}


/*--------------------------
--------- MAX 480px --------
--------------------------*/
@media only screen and (max-width: 480px){




  
	}


/*--------------------------
--------- MAX 360px --------
--------------------------*/

@media only screen and (max-width: 360px){
	}

@media screen and (max-width: 63.875em) {
	.ac-wrapper { 
	font-size: 60%; 
	width: 100%; 
	padding: 0 20px;}

	.content h1{
	width: 100%;
	text-align: center;
	font-size: 3.5em;
	top: 0;
	left: auto;
	position: relative;}

	

	.ac-device {
	margin: 0;
	width: 100%;}

	.ac-device h3 { 
	width: 50%;
	left: 290px;}

	.ac-wrapper h2 { 
	left: 308px; 
	padding: 0; 
	text-align: left; 
	margin-left: 30px;}

	.ac-device nav {
	left: 280px;
	font-size: 2em;}
	}

@media screen and (max-width: 39.8125em) {
	.ac-grid {
	width: 90%;
	left: 5%;
	margin-left: 0;
	padding-top: 150px;}

	.ac-grid a {
	width: 22%;}
	}


@media screen and (max-width: 35.6875em) {
	.ac-wrapper {
	padding: 0 20px 100px;}

	

	.ac-wrapper h2 { 
	width: 100%;
	text-align: center;
	margin: 0 0 1em;
	top: 0;
	left: auto;
	position: relative;}


	.content h1{
	width: 100%;
	text-align: center;
	font-size: 3em;
	top: 0;
	left: auto;
	position: relative;}

	.ac-device {
	margin: 0 auto;
	width: 288px;}

	.ac-device h3 {
	position: relative;
	margin: 0;
	left: auto;
	top: auto;
	width: 100%;
	padding-top: 100px;
	display: block;
	text-align: center;}

	.ac-device nav {
	position: relative;
	padding-top: 20px;
	text-align: center;
	bottom: auto;
	margin: 0;
	left: auto;}
}