/*-----------------------------------------------------------------
[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;
		padding-top: 50px;
	}

	.header-top {
    display: -webkit-box;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    }

	.im {
		max-width: 40%;
		right: 46% !important;
		top: 5% !important;
	}
	.section .content.with-clock .c-left .c-clock .img-top,
	.section .content .c-illustr .img-top{
		margin-bottom: 0;
	}
	.section .content .desc p {
    font-size: 13px;
	}
	.section .content .header {
    margin-bottom: 10px;
	}
	.section .content .c-illustr .img-middle, .section .content.with-clock .c-left .c-clock .img-middle {
    content: '';
    width: 110px;
    height: 110px;
    }
	/* Clock */
	.section .content.with-clock .c-right {
		margin-top: 0;
	}
	.section .content .c-right:before {
		max-height: 50%;
		margin-top: 35%;
	}
	.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;
	}
	p {
		font-size: 12px;
	}
	.section .content .header h2 {
		font-size: 42px;
	}
	.section .content .c-illustr, .section .content.with-clock .c-left .c-clock {
    	margin-top: 45px;
}

.img-rotator {
    position: relative;
    width: 250px;
    height: 240px;
	margin-left: 0;
}

.image-switcher { 
    margin: 0% 8% !important;
}
}

@media (max-width : 1024px) and (max-height : 400px)  {
.img-rotator {
    position: relative;
    width: 250px;
    height: 170px;
}
}
/* 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;
	}

	.img-rotator {
        position: relative;
        width: 225px;
        height: 205px;
    }

	.section .content .c-illustr, .section .content.with-clock .c-left .c-clock {
        left: 50px;
    }
}
/* 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;
	}
	.im {
        max-width: 50%;
        top: 15% !important;
    }
	    .section .content .c-right:before {
        max-height: 50%;
        margin-top: 50%;
    }
	.section .content .c-left {
		float: left;
		width: 50%;
		text-align: right;
	}
	.im {
        right: 42% !important;
    }
	.section .content .c-illustr, .section .content.with-clock .c-left .c-clock {
        left: 0px;
    }

}
/* Screen small than 600 */

/* Screen small than 600 Nexus 7, iPhone 6 plus : 412px*/
@media (max-width : 700px){
	.section .content .c-illustr, .section .content.with-clock .c-left .c-clock {
        left: 70px;
    }
}

/* Screen small than 480px */
@media (max-width : 481px){
	.header-top .logo-wrapper {
		margin-left: 0;
		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.75);
		border-radius: 25px;
		margin-right: -100%;
		opacity: 0;
		height: 0;
		visibility: hidden;
		-webkit-transition: 0.3s;
		transition: 0.3s;
		padding-right: 24px;
	}
	.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: 145px;
		padding-bottom: 24px;
		top: 0;
	}

	.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;
	}
	.im {
		opacity: 0;
		position: absolute;
	}
	.section .content .header h3 {
        font-size: 28px;
    }
}
/* 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 : 400px) {
	    .im { 
        top: 15% !important;
    }

}