/*-----------------------------------------------------------------
[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 1200px */
@media (max-width : 1200px){
	/* page cover */
	.page-cent .content ,
	.page-about .content {
		padding-left: 56px;
		padding-right: 56px;
	}

	.page-cent .content{
    width: 1000px !important;
	}
}


/* Screen small than 1024px */
@media (max-width : 1024px){
    /* page cover */
  .page-cent .content ,
	.page-about .content {
		padding-left: 56px;
		padding-right: 56px;
	}

	.page-cent .content{
    width: 800px !important;
	}
}
/* Screen Small than 720px */
@media (max-width : 720px){
	
	#fp-nav.right{
		right: 5px;
	}
    .page .content .clock {
		-webkit-transform: scale(0.6);
		transform: scale(0.6);
	}
	.page-cent .content{
    width: 600px !important;
	}
	
	.page-cent .content ,
	.page-about .content {
		padding-left: 56px;
		padding-right: 56px;
	}
	.page .form label ,
	.page .form input ,
	.page .form button ,
	.page .form textarea ,
	.page h4 ,
	.page-footer ,
	.header-top .menu a ,
	.page p{
		font-size: 14px;
	}
	.page .form.send_email_form .fields{
		height: 35px;
	}
	.page .form.send_email_form .buttons,
	.page .form.send_email_form .buttons button{
		height: 34px;
	}
	.page-cent .p-title h3{
		font-size: 24px;
		border-bottom-width: 5px;
	}
	.page-cent .p-title h2{
		font-size: 30px;
	}
	.header-top .menu a {
		padding-top: 17px;
	}
	.header-top .logo img {
		padding: 12px 10px;
	}
	.page-home .content h2 {
		font-size: 40px;
	}
	.page-home .content h3 {
		font-size: 16px;
	}
    
}
/* Screen small than 480 */
@media (max-width : 480px){
	
	.page-cent .content{
    width: 400px !important;
	}

	.page-contact .contact img{
		height: 32px;
	}
	.page .form label{
		padding-top: 0.4em;
	}
	.page-home .content h2 {
		font-size: 40px;
		line-height: 1em;
	}
	.page-home .content h3 {
		font-size: 16px;
		margin-left: 4px;
	}
	.page-home .content .header > div{
		display: block;
	}

	.tugrug_content{
		display: flex;
		flex-wrap: wrap;
	}
	
	.tugrug_content > div{
		width: 100%;
	}
	
	/* .tugrug_content > div:last-child{
		width: 100%;
		padding: 5px;
		text-align: center;
	} */

	.page-home .logo-container img.h-logo{
		height: 300px!important;
		width: auto;
	}

	.market-banner{
		right: calc(50% - 180px);
		height: 100px;
	}

	.market-banner img{
		width: 360px;
	}

	.market-text{
		padding: 10px 15px !important;
		position: absolute;
		text-align: center !important;
		top: -30px;
		right: calc(50% - 170px);
		width: 340px;
		display: flex;
		z-index: 1000;
		/* border: 1px solid rgba(255, 255, 255, 0.8); */
	}

	.market-text p{
		color: #172D54;
		font-weight: 400;
		margin-bottom: 0;
		font-size: 1em;
		line-height: 1.2em;
		text-shadow: 1px 1px 2px #fff;
	}

	.market-text2{
		padding: 10px 15px !important;
		position: absolute;
		text-align: center !important;
		bottom: 20px;
		right: calc(50% - 170px);
		width: 340px;
		display: flex;
		z-index: 1000;
		/* border: 1px solid rgba(255, 255, 255, 0.8); */
	}

	.market-text2 p{
		color: #172D54;
		font-weight: 400;
		margin-bottom: 0;
		font-size: 1em;
		line-height: 1.2em;
		text-shadow: 1px 1px 2px #fff;
	}

	.new2m{
		top: calc(50% - 60px) !important;
	}

	.tableTitle{
		position: absolute;
		text-align: center !important;
		top: 120px;
		right: calc(50% - 190px);
		width: 380px;
		display: flex;
		height: 60px;
	}

	.tableTitle > div{
		width: 50%;
		padding: 5px;
	}
	.tableTitle h3{
		text-align: center;
		font-size: 1em;
		text-transform: uppercase;
		font-weight: bold;
		color: #172D54;
		padding-top: 10px;
		font-family: 'Roboto';
		line-height: 1em;
	}

	.quick-link{
		top: 70%;
	}

	.tableMenu{
		position: absolute;
		text-align: center !important;
		top: calc(50% - 55px);
		right: calc(50% - 180px);
		width: 360px;
		display: flex;
		height: 150px;
		z-index: 1000;
	}

	.tableMenu > div{
		width: 50%;
		padding: 5px;
	}

	.tableMenu img{
		width: 100px;
		height: 100px;
	}

	.tableMenu .desc{
		color: #008cba;
		font-weight: bold;
		font-size: 2em;
	}

	.tableMenu .desc span{
		color: #07b39b
	}

	.tableMenu .desc{
		margin-top: 15px;
	}


	.tableMenu .icon-image a{
		transition: 0.5s;
		/* border: 1px solid red; */
		display: block;
	}

	.tableMenu .icon-image a:hover{
		transform: scale(1.4);
		-webkit-transform: scale(1.4);
	}

	.market-address{
		width: 300px;
		position: absolute;
		text-align: center !important;
		bottom: -20px;
		right: calc(50% - 150px);
		font-size: 1.5em;
		/* border: 1px solid #fff; */
		z-index: 100;
	}

	.market-address p{
		color: #172D54;
		font-weight: 700;
		margin-bottom: 30px;
	}

	.market-table{
		position: absolute;
		text-align: center !important;
		top: 150px;
		right: calc(50% - 400px);
	}

	.market-table img{
		width: 800px;
	}

	.page-cent .p-title h2{
		text-transform: uppercase;   
		font-size: 20px;
		line-height: 1;
		text-align: left;
		margin-top: 0.3em;
		margin-bottom: 0.3em;
		display: block;
		color: #fff;
		font-family: 'Roboto';
	}

	.asuult_table > div{
		padding: 20px;
		border: 1px solid #fff;
		margin: 0px;
		height: 100px;
		background-color: rgba(255, 255, 255, 0.8);
		color: #172d54 !important;
		text-align: left;
		vertical-align: middle;
		overflow:hidden; 
		white-space:nowrap;
		text-overflow: ellipsis;
		font-size: 0.9rem;
		font-weight: normal;
		line-height: 1.2em;
		text-shadow: 1px 1px 2px #fff;
	}

	.contact{  
	/*    margin-top: -1rem;*/
		width: auto !important;
	}


}
/* Screen small than 430 */
@media (max-width : 430px){
    .page .content .clock {
		-webkit-transform: scale(0.5) translateX(-100%) translateY(-100%);
		transform: scale(0.5) translateX(-100%) translateY(-100%);
		position: absolute;
		top: 50%;
		left: 50%;
	} 
	.page .content .clock .header {
		font-size: 40px;
		top: -120px;
	}
	.page.transition{
/*		background: transparent;*/
	}
	#fp-nav.right{
		right: 0px;
	}
	.page-footer {
		font-size: 14px;
		bottom: 20px;
		right: 20px;
	}
	.p-footer .arrow-d {
		bottom: 72px;
	}
}
/* Screen small than 360px */
@media (max-width : 360px){
	
	.page-contact .fields:first-child ,
	.page-contact .contact .columns li:first-child {
		margin-top: 0;
	}
	.page-contact .form .fields,
	.page-contact .contact .columns li{
		margin-top: 10px;
	}
	.page .form textarea {
		min-height: 64px;
	}
	
}
/* Screen small than 320px */
@media (max-width : 320px){
	.page-cent .p-title h2 {
		font-size: 24px;
	}
	.p-footer {
		display: none;
	}
	.header-top {
		height: 32px;
	}
	.header-top .logo img {
		height: 32px;
		padding: 0px 10px;
	}
	.header-top .menu a {
		height: 32px;
		padding-top: 5px;
	}
	
	.page-home .logo-container{
		top: 40px;
	}
	.page-home .logo-container img.h-logo{
		height: 80px;
	}
	.page .form label ,
	.page .form input ,
	.page .form button ,
	.page .form textarea ,
	.page h4 ,
	.page-footer ,
	.header-top .menu a ,
	.page p{
		font-size: 12px;
	}
	.page-cent .p-title h3{
		font-size: 20px;
		border-bottom-width: 5px;
	}
	.page-cent .p-title h2{
		font-size: 20px;
	}
	.header-top .menu a {
		padding-top: 6px;
	}
	
}


 
/* Responsive height */
@media (max-height : 420px){
	
	.page .content .clock {
		-webkit-transform: scale(0.4) translateX(-125%) translateY(-125%);
		transform: scale(0.4) translateX(-125%) translateY(-125%);
		position: absolute;
		top: 50%;
		left: 50%;
	} 
	.quick-link {
		top: auto;
		bottom: 0;
	}
	.header-top {
		height: 32px;
	}
	.header-top .logo img {
		height: 32px;
		padding: 0px 10px;
	}
	.header-top .menu a {
		height: 32px;
		padding-top: 5px;
	}
	.columns.left{
		width: 50%;
	}
	.columns.right{
		width: 50%;
	}
	.page-home .logo-container{
		top: 40px;
	}
	.page-home .logo-container img.h-logo{
		height: 80px;
	}
	.page-contact .fields:first-child ,
	.page-contact .contact .columns li:first-child {
		margin-top: 0;
	}
	.page-contact .form .fields,
	.page-contact .contact .columns li{
		margin-top: 5px;
	}
	.page .form textarea {
		min-height: 64px;
	}
	
	.p-footer .arrow-d {
		bottom: 10px;
		display: none;
	}
	.page-footer{
		display: none;
	}

	.page-home .logo-container img.h-logo{
		height: 300px!important;
		width: auto;
	}

	.market-banner{
		right: calc(50% - 200px);
		height: 100px;
	}

	.market-banner img{
		width: 400px;
	}

	.market-text{
		padding: 10px 15px !important;
		position: absolute;
		text-align: center !important;
		top: -80px;
		right: calc(50% - 200px);
		width: 400px;
		display: flex;
		z-index: 1000;
		/* border: 1px solid rgba(255, 255, 255, 0.8); */
	}

	.market-text p{
		color: #172D54;
		font-weight: 400;
		margin-bottom: 0;
		font-size: 1.2em;
		line-height: 1.2em;
		text-shadow: 1px 1px 2px #fff;
	}

	.market-text2{
		padding: 10px 15px !important;
		position: absolute;
		text-align: center !important;
		bottom: 20px;
		right: calc(50% - 200px);
		width: 400px;
		display: flex;
		z-index: 1000;
		/* border: 1px solid rgba(255, 255, 255, 0.8); */
	}

	.market-text2 p{
		color: #172D54;
		font-weight: 400;
		margin-bottom: 0;
		font-size: 1.2em;
		line-height: 1.2em;
		text-shadow: 1px 1px 2px #fff;
	}

	.new2m{
		top: calc(50% - 60px) !important;
	}

	.tableTitle{
		position: absolute;
		text-align: center !important;
		top: 120px;
		right: calc(50% - 190px);
		width: 380px;
		display: flex;
		height: 60px;
	}

	.tableTitle > div{
		width: 50%;
		padding: 5px;
	}
	.tableTitle h3{
		text-align: center;
		font-size: 1em;
		text-transform: uppercase;
		font-weight: bold;
		color: #172D54;
		padding-top: 10px;
		font-family: 'Roboto';
		line-height: 1em;
	}

	.quick-link{
		top: 70%;
	}

	.tableMenu{
		position: absolute;
		text-align: center !important;
		top: calc(50% - 55px);
		right: calc(50% - 200px);
		width: 400px;
		display: flex;
		height: 150px;
		z-index: 1000;
	}

	.tableMenu > div{
		width: 50%;
		padding: 5px;
	}

	.tableMenu img{
		width: 100px;
		height: 100px;
	}

	.tableMenu .desc{
		color: #008cba;
		font-weight: bold;
		font-size: 2em;
	}

	.tableMenu .desc span{
		color: #07b39b
	}

	.tableMenu .desc{
		margin-top: 15px;
	}


	.tableMenu .icon-image a{
		transition: 0.5s;
		/* border: 1px solid red; */
		display: block;
	}

	.tableMenu .icon-image a:hover{
		transform: scale(1.4);
		-webkit-transform: scale(1.4);
	}

	.market-address{
		width: 300px;
		position: absolute;
		text-align: center !important;
		bottom: -20px;
		right: calc(50% - 150px);
		font-size: 1.5em;
		/* border: 1px solid #fff; */
		z-index: 100;
	}

	.market-address p{
		color: #172D54;
		font-weight: 700;
		margin-bottom: 30px;
	}

	.market-table{
		position: absolute;
		text-align: center !important;
		top: 150px;
		right: calc(50% - 400px);
	}

	.market-table img{
		width: 800px;
	}

	.page-cent .p-title h2{
		text-transform: uppercase;   
		font-size: 20px;
		line-height: 1;
		text-align: left;
		margin-top: 0.3em;
		margin-bottom: 0.3em;
		display: block;
		color: #fff;
		font-family: 'Roboto';
	}
}