@font-face { font-family: 'Antonio'; src: url("../fonts/Antonio-Light.eot"); src: url("../fonts/Antonio-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/Antonio-Light.woff2") format("woff2"), url("../fonts/Antonio-Light.woff") format("woff"), url("../fonts/Antonio-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; } @font-face { font-family: 'Antonio'; src: url("../fonts/Antonio-Regular.eot"); src: url("../fonts/Antonio-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Antonio-Regular.woff2") format("woff2"), url("../fonts/Antonio-Regular.woff") format("woff"), url("../fonts/Antonio-Regular.ttf") format("truetype"); font-weight: normal; font-style: normal; } @font-face { font-family: 'Antonio'; src: url("../fonts/Antonio-Bold.eot"); src: url("../fonts/Antonio-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Antonio-Bold.woff2") format("woff2"), url("../fonts/Antonio-Bold.woff") format("woff"), url("../fonts/Antonio-Bold.ttf") format("truetype"); font-weight: bold; font-style: normal; } * { margin: 0; padding: 0; font-family: "Antonio"; box-sizing: border-box; } img { border: none; } .clear { width: 100%; clear: both; display: block; } .tr { display: table-row; } body { overflow-x: hidden; background-color: #8f8f8f; } header { padding: 30px; display: block; background-color: #ffffff; } header .logo { text-align: left; display: inline-block; vertical-align: text-top; } header .logo img { display: block; } header .contact { float: right; display: block; margin-top: 5px; } header .contact .mail { margin-right: 10px; display: inline-block; vertical-align: middle; } header .contact .mail img { display: inline-block; vertical-align: middle; } header .contact .phone { color: #f1592a; font-size: 20px; display: inline-block; vertical-align: middle; } header .contact .phone img { text-decoration: none; border: none; margin-right: 5px; display: inline-block; vertical-align: middle; } header .contact .phone .phone_number { letter-spacing: 0.1em; display: inline-block; vertical-align: middle; } .banner_section { display: table-row; } .banner_section .contain_banner { position: relative; display: table-cell; } .banner_section .contain_banner .featured_icon { position: absolute; bottom: 30px; right: 30px; } .banner_section .contain_banner .banner_bg { display: block; width: 100%; } .anim-left { animation-duration: 2s; animation-name: from-left; animation-direction: normal; animation-iteration-count: 1; } .anim-right { animation-duration: 2s; animation-name: from-right; animation-direction: normal; animation-iteration-count: 1; } .showit { animation-name: showit; animation-duration: 2s; animation-direction: normal; animation-iteration-count: 1; } .middle_logo { opacity: 0; width: 100%; padding: 20px; display: block; text-align: center; animation-delay: 2s; background-color: #ffffff; border-top: 2px solid #8f8f8f; border-bottom: 2px solid #8f8f8f; } .middle_logo img { display: inline-block; vertical-align: text-top; } .section_photography, .section_design { opacity: 0; display: block; animation-delay: 2s; background-color: #ffffff; } .section_photography a, .section_design a { width: 100%; float: left; padding: 4%; display: block; max-height: 100px; background-size: cover; width: calc(100% / 12); background-position: center; border-bottom: 2px solid #8f8f8f; } .section_logos { opacity: 0; display: block; padding: 100px; background-color: #ffffff; border-bottom: 2px solid #8f8f8f; } .section_logos ul { width: 100%; display: block; margin: 0 auto; text-align: center; } .section_logos ul li { padding: 22px; max-width: 8%; display: inline-block; vertical-align: middle; } .section_logos ul li a { width: 100%; display: block; text-decoration: none; } .section_logos ul li a img { max-width: 100%; display: block; max-height: 120px; } .overlay { top: 0; left: 0; right: 0; bottom: 0; position: fixed; background-color: rgba(255, 255, 255, 0.89); } .overlay .ligthbox-wrap { max-height: 900px; display: block; max-width: 60%; margin: 0 auto; } .overlay .ligthbox-wrap img { width: 100%; display: block; margin: 0 auto; } .self_content { opacity: 0; width: 100%; display: block; padding: 100px 0; background-color: #f1592a; } .self_content .self_content_wraper { width: 100%; padding: 0 50px; display: block; margin: 0 auto; font-size: 19px; max-width: 1250px; } .self_content .self_content_wraper p { color: #ffffff; letter-spacing: 0.09em; line-height: 1.4em; margin-bottom: 20px; } .self_content .self_content_wraper a { color: #302f2f; text-decoration: none; } footer { opacity: 0; width: 100%; display: block; background-color: #ffffff; } footer .contact_wrap { color: #8f8f8f; display: block; margin: 0 auto; max-width: 1200px; } footer .contact_wrap form { width: 70%; float: left; display: block; padding: 20px 40px; } footer .contact_wrap form .label { display: block; width: 100%; } footer .contact_wrap form input, footer .contact_wrap form textarea { width: 100%; resize: none; font-size: 18px; padding: 5px 7px; border: 2px solid #8f8f8f; } footer .contact_wrap form .business { width: 70%; padding: 30px 0 15px; } footer .contact_wrap form .business input { width: 100%; } footer .contact_wrap form .form_phone_email { width: 100%; display: block; } footer .contact_wrap form .form_phone_email .form_phone { width: 25%; float: left; display: block; } footer .contact_wrap form .form_phone_email .form_email { width: 70%; float: right; display: block; } footer .contact_wrap form .form_message { padding: 15px 0 30px; } footer .contact_wrap form .form_send button { color: #ffffff; border: none; width: 320px; padding: 10px; display: block; font-size: 25px; cursor: pointer; letter-spacing: 3px; text-transform: uppercase; background-color: #f1592a; transition: 0.3s ease background-color; } footer .contact_wrap form .form_send button:hover { background-color: #f47a55; transition: 0.3s ease background-color; } footer .contact_wrap form .name { display: block; width: 100%; } footer .contact_wrap form .name input { width: 100%; } footer .contact_wrap form .name input.first_name { float: left; } footer .contact_wrap form .name input.last_name { float: right; } footer .contact_wrap .cinfo { width: 30%; float: left; display: block; padding: 40px 20px; } footer .contact_wrap .cinfo a { display: block; color: #f1592a; margin-bottom: 20px; text-decoration: none; } footer .contact_wrap .cinfo a img { display: inline-block; vertical-align: middle; } footer .footer_brand { width: 100%; padding: 50px 0; display: block; text-align: center; background-color: #ffffff; } footer .footer_brand img { display: inline-block; } ::-webkit-input-placeholder { color: #a7a7a7; } ::-moz-placeholder { color: #a7a7a7; } :-ms-input-placeholder { color: #a7a7a7; } :-moz-placeholder { color: #a7a7a7; } @media screen and (max-width: 1500px) { .section_photography a, .section_design a { padding: 7%; width: calc(100% / 6); } .section_logos ul li { max-width: 15%; } } @media screen and (max-widthgul: 1500px) { .section_logos { padding: 30px; } } @media screen and (max-width: 1000px) { header { padding: 10px 20px; } header .logo img { max-width: 230px; } header .contact { max-width: 230px; } header .contact .mail img { max-width: 30px; } header .contact .phone img { max-width: 25px; } .middle_logo { padding: 10px; } .middle_logo img { max-width: 170px; } .section_logos ul li { max-width: 24%; } .self_content { padding: 50px 0; } footer .contact_wrap form { width: 100%; float: none; } footer .contact_wrap .cinfo { width: 100%; float: none; text-align: center; } footer .contact_wrap .cinfo a { width: auto; margin: 0 10px; display: inline-block; vertical-align: middle; } } @media screen and (max-width: 640px) { header { text-align: center; } header .contact { float: none; width: 100%; text-align: center; max-width: 100%; } .banner_section .contain_banner .featured_icon { bottom: 10px; right: 10px; max-width: 30px; } .section_photography a, .section_design a { padding: 15%; width: calc(100% / 3); } .section_logos ul li { max-width: 49%; padding: 7%; width: 49%; } .section_logos ul li a img { max-height: 470px; } .self_content { padding: 30px 0; } .self_content .self_content_wraper { font-size: 16px; padding: 0 30px; } footer .contact_wrap form .business { width: 100%; float: none; } footer .contact_wrap form .form_phone_email .form_phone { width: 100%; float: none; } footer .contact_wrap form .form_phone_email .form_email { width: 100%; float: none; padding: 30px 0 0; } footer .contact_wrap form .form_send button { width: 100%; float: none; } footer .contact_wrap .cinfo { padding: 25px 20px; } footer .contact_wrap .cinfo a { margin: 10px 0; } } @keyframes from-left { 0% { transform: translateX(-1500px); } 100% { transform: translateX(0px); } } @keyframes from-right { 0% { transform: translateX(1500px); } 100% { transform: translateX(0px); } } @keyframes showit { 0% { opacity: 0; } 100% { opacity: 1; } }