Microbot-v2/creation/creation-0/css/main_responsive.css

/*-----------------------------------------------------------------
[Legal Notice]

Copyright (c) HighHay/Mivfx
Before using this template, you should agree with themeforest licenses terms.
http://themeforest.net/licenses
-------------------------------------------------------------------*/


/** CSS-AddOn for Large screen First responsiveness approch */



/* Screen small than 1024px */
@media (max-width : 1024px){
	#fp-nav,
	#fp-nav.right{
		margin-right: 0px;
	}
	.section {
		padding-left: 16px;
		padding-right: 16px;
	}
	.section .content{
		padding: 0 32px;
	}
	.section .content .c-right {
		padding-left: 56px;
	}
	.section .content .c-left {
		padding-right: 56px;
	}
	.section .content.with-clock .c-left .c-clock .img-top,
	.section .content .c-illustr .img-top{
		margin-bottom: 0;
	}
	/* Clock */
	.section .content.with-clock .c-right {
		margin-top: 0;
	}
	.section .content.with-clock .c-left .c-clock {
		padding-top: 0;
		margin-top: 32px;
		padding-bottom: 112px;
		padding-right: 112px;
	}
	.section .content.with-clock .c-left .c-clock .img-middle {
		width: 112px;
		height: 112px;
	}
	.section .content.with-clock .c-left .c-clock .tile-days {
		padding-top: 36px;
	}
	.section .content.with-clock .c-left .c-clock .tile-days .days {
		font-size: 36px;
	}
	.section .content.with-clock .c-left .c-clock .img-top{
		margin-top: 0;
		float: right;
		margin-bottom: 0;
		margin-right: -112px;
	}
	.section .content.with-clock .c-left .c-clock .tile-minutes {
		top: 112px;
		left: 0;
	}
	.section .content.with-clock .c-left .c-clock .tile-seconds {
		left: 112px;
	}
	/* Other section */
	.section .content .c-illustr .img-top{
		margin-bottom: 112px;
	}
	.section .content .c-illustr .img-middle{
		margin-left: 0;
	}
	.section .content .c-illustr .img-bottom{
		display: none;
	}
}
/* Screen Small than 800px */
@media (max-width : 800px){
	.section .content .c-illustr .img-top{
		margin-bottom: 0;
	}
	.section .content .c-illustr .img-middle{
		margin-left: 112px;
		width: 144px;
		height: 144px;
	}
	.section .content .header h3{
		font-size: 18px;
	}
}
/* Screen Small than 720px */
@media (max-width : 720px){
	
	/* disable animations on mobile : comment below if you want to enable them */
/*	.section .c-right *,
	.section .c-left *,
	.section .clock *{
		-webkit-transition: 0s !important;
		-webkit-transition: 0s !important;
		-webkit-transition-delay: 0s !important;
		transition-delay: 0s !important;
	}
	
	.section .anim-zoomin,
	.section .anim-rotate,
	.section .anim-slideleft,
	.section .anim-slideright{
		-webkit-transform: none;
		transform: none;
		opacity: 1;
		-webkit-transition: 0s !important;
		transition: 0s !important;
		-webkit-transition-delay: 0s !important;
		transition-delay: 0s !important;
	}*/
	.site-footer{
		display: none;
	}
}
/* Screen small than 600 */

/* Screen small than 600 Nexus 7, iPhone 6 plus : 412px*/
@media (max-width : 600px){
	
}

/* Screen small than 480px */
@media (max-width : 481px){
	.header-top .logo-wrapper {
		margin-left: 16px;
		margin-top: 8px;
	}
	
	.header-top .logo-wrapper .logo {
		font-size: 18px;
	}
	.header-top .logo-wrapper .logo img {
		max-height: 40px;
		margin-right: 8px;
	}
	.header-top .site-nav {
		float: right;
		margin-top: 64px;
/*		background: rgba(0,0,0,0.2);*/
		margin-right: -100%;
		opacity: 0;
		height: 0;
		visibility: hidden;
		-webkit-transition: 0.3s;
		transition: 0.3s;
	}
	.header-top .site-nav li {
		float: none;
		text-align: right;
	}
	.header-top .site-nav li.separator {
		display: none;
	}
	.header-top .site-nav li a{
		margin: 0;
		padding: 16px 32px;
		padding-right: 8px;
	}
	.header-top .site-nav li a:after{
		display: none;
	}
	/* Menu visible */
	.header-top .menu-icon{
		display: block;
	}
	.header-top.menu-visible .site-nav{
		margin-right: 16px;
		opacity: 1;
		visibility: visible;
		height: auto;
	}
	.page-nav{
		top: 76px;
		left: -120px;
		opacity: 0;
		visibility: hidden;
		-webkit-transition: 0.3s;
		transition: 0.3s;
	}
	.page-nav.menu-visible{
		top: 76px;
		left: 16px;
		opacity: 1;
		visibility: visible;
	}
	#fp-nav{
		display: none;
	}
	.section {
		padding-left: 24px;
		padding-right: 24px;
		min-height: 320px;
	}
	.section .content{
		padding: 0;
	}
	.section .content .c-left {
		float: none;
		width: 100%;
		text-align: left;
		padding-right: 0px;
		padding-left: 0px;
	}
	.section .content .c-right {
		float: right;
		width: 100%;
		text-align: right;
		padding-left: 0px;
/*		position: absolute;*/
		padding-top: 24px;
		padding-bottom: 24px;
		top: 0;
	}
	.section .content .c-right:before {
		display: none;
	}
	.section .content.with-clock .c-right {
		margin-top: 0px;
	}
	.section .content.with-clock .c-left .c-clock {
		padding-top: 0;
		margin-top: 56px;
		padding-bottom: 112px;
		padding-right: 112px;
	}
	.section .content.with-clock .c-left .c-clock .img-middle {
		width: 112px;
		height: 112px;
	}
	.section .content.with-clock .c-left .c-clock .tile-days {
		padding-top: 36px;
	}
	.section .content.with-clock .c-left .c-clock .tile-days .days {
		font-size: 36px;
	}
	.section .content.with-clock .c-left .c-clock .img-top{
		margin-top: 0;
		float: right;
		margin-bottom: 0;
		margin-right: -112px;
	}
	.section .content.with-clock .c-left .c-clock .tile-minutes {
		top: 112px;
		left: 0;
	}
	.section .content.with-clock .c-left .c-clock .tile-seconds {
		left: 112px;
	}
	/*other sections*/
	.section .content .c-illustr .img-middle{
		width: 112px;
		height: 112px;
		display: block;
	}
	.section .content .c-left .c-logo {
		margin-bottom: 72px;
	}
}
/* Screen small than 360px */
@media (max-width : 360px){
	
	
	
}
/* Screen small than 320px */
@media (max-width : 320px){
	
	
}


 
/* Responsive height */
@media (max-height : 640px) and (max-width: 600px){
	#fp-nav{
		display: none;
	}
	
}
/* Responsive height */
@media (max-height : 420px) and (max-width: 480px){
	
}