/*----------------------------------------------------------------- [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){ /* page cover */ .page-cent .content , .page-about .content { padding-left: 56px; padding-right: 56px; } } /* 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: 100%; } .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 .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 .form input { min-width: 100px; padding: 0em 1em; /* padding-left: 3.5em;*/ left: 40px; } .page .form.send_email_form .fields{ padding-left: 8px; } .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; } } /* 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; } }