* { color: #9e989f; font-family: 'Lato', sans-serif; font-size: 20px; font-weight: normal; } body { background: #ffffff; margin: 0px; padding: 0px; } header { background: #ffffff; height: 200px; left: 0px; position: absolute; top: 0px; width: 100%; } header nav { background: #ffffff; border-bottom: 1px solid #9e989f; height: 50px; } header nav a { display: block; float: left; font-size: 16px; line-height: 50px; margin: 0px; padding: 0px; text-align: center; text-decoration: none; text-transform: capitalize; width: calc( 100% / 3 ); } header nav:after { clear: both; content: ''; display: block; } header nav:nth-child(2) { background: #ffffff; border-bottom: 0px; } header nav:nth-child(2) a { color: transparent; display: block; float: left; font-size: 0px; height: 150px; margin: 0px; padding: 0px; position: relative; text-align: center; text-decoration: none; text-transform: capitalize; width: calc( ( 100% - 100px ) / 2 ); } header nav:nth-child(2) a:nth-child(2) { background: center center no-repeat transparent; background-size: contain; width: 100px; } header nav:nth-child(2):after { clear: both; content: ''; display: block; } header nav:nth-child(2) a:before { background: center center no-repeat transparent; background-size: contain; content: ''; height: 50px; left: calc( ( 100% - 50px ) / 2 ); position: absolute; top: 50px; width: 50px; } header nav:nth-child(2) a:nth-child(2):before { display: none; }  header nav:nth-child(3) { display: none; } main { padding-top: 180px; } section { clear: both; } div.banner { background: center center no-repeat; background-size: cover; display: block; margin: 20px 30px 0px 30px; padding-top: calc( 100% / 2 ); } h1, h2, h3 { color: #b38cc0; font-family: 'PT Serif', serif; font-size: 40px; font-weight: 700; line-height: 55px; text-transform: capitalize; } h1, h2, h3, p, ul { margin: 20px 30px 0px 30px; } h1:first-letter, h2:first-letter, h3:first-letter { text-transform: capitalize; } p { line-height: 26px; } ul { padding-left: 30px; } p a { color: #0e9594; font-weight: bold; text-decoration: none; } p a:hover { text-decoration: underline; } p a.button, form input[type="button"], form input[type="submit"] { background: #0e9594; border: 1px solid #ffffff; border-radius: 10px; color: #ffffff; cursor: pointer; display: block; font-weight: bold; margin-right: 30px; padding: 5px 40px; text-decoration: none; } p a.button { display: inline-block; } p a.button:first-letter { text-transform: capitalize; } p a.button:hover { text-decoration: none; } nav.contacts { display: none; } section.whois { background: #b38cc0; margin: 20px 0px 0px 0px; padding: 10px 0px 20px 0px; } section.whois h2, section.whois h3 { display: none; } section.whois article.cqc { background: #ffffff; border-radius: 15px; margin: 20px 30px 0px 30px; padding: 10px 0px 20px 0px; } section.whois article.cqc > p { color: #b38cc0; font-size: 16px; } section.whois article.cqc > div { display: block; margin: 20px 30px 0px 30px; } section.whois article > p { color: #ffffff; } section.whois article > p a.button { background: #ffffff; color: #0e9594; } div.cqc-widget { background: #ffffff; border: 1px solid #e4e4e4; } div.cqc-widget > a { background: center left no-repeat transparent; display: block; height: 42px; margin: 10px; }  div.cqc-widget p { color: #333333; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 300; line-height: 1; margin: 10px 10px 0px 10px; } div.cqc-widget p strong { color: #333333; font-size: 15px; font-weight: 700; } div.cqc-widget p a { background: #ffffff; border: 1px solid #c9c6b9; border-radius: 4px; box-shadow: 0 1px 2px #c9c6b9; color: #6c276a; display: inline-block; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: 700; padding: 4px 10px 4px 10px; } div.cqc-widget p a:after { content: '>'; float: right; margin-left: 10px; } div.cqc-widget p.result { font-size: 18px; font-weight: 700; } div.cqc-widget p.result:after { background: #eeeeee; border-radius: 50%; content: ''; display: inline-block; height: 15px; margin: 0px 0px 0px 5px; width: 15px; } div.cqc-widget div { background: whitesmoke; margin: 5px 10px 10px 10px; padding: 10px 0px 20px 0px; } div.cqc-widget div p:nth-child(3) { font-size: 12px; margin-top: 15px; } div.cqc-widget.rating-Good p.result:after { background: green; } @media ( min-width: 1000px ) { header { height: 190px; } header nav:nth-child(1) { border-bottom: 0px; margin-left: 3%; } header nav:nth-child(3) { display: block; } header nav { border: 0px; border-top: 1px solid #9e989f; display: block; float: left; margin: 60px 0px 0px 0px; padding: 0px; width: calc( 94% / 3 ); } header nav a { font-size: 14px; text-align: left; width: calc( 100% / 3 ); } header nav:nth-child(2) { border: 0px; margin-top: 0px; } header nav:nth-child(2) a { display: none; } header nav:nth-child(2) a:nth-child(2) { display: block; height: 110px; margin-top: 20px; width: 100%; } header nav:nth-child(2) a:nth-child(2):before { height: 150px; left: calc( ( 100% - 200px ) / 2 ); top: 20px; width: 200px; } header nav:nth-child(3) a { text-align: right; } header nav:nth-child(3) a.twitter, header nav:nth-child(3) a.facebook { background: center center no-repeat transparent; background-size: contain; float: right; height: 30px; margin: 10px 0px 0px 10px; width: 30px; } div.banner { padding-top: calc( 100% / 3.5 ); } main > p { margin: 20px 15% 0px 15%; } h1 { font-size: 50px; line-height: 80px; margin: 20px 0px 0px 0px; padding: 0px 15% 0px 15%; } h1.home { font-size: 60px; } nav.contacts { border: 1px solid #0e9594; display: block; float: left; margin: 50px auto 70px 15%; } nav.contacts a { color: #0e9594; display: inline-block; font-size: 20px; margin: 10px 0px 10px 10px; padding: 10px 20px; text-decoration: none; } nav.contacts a:before { background: center center no-repeat transparent; background-size: contain; content: ''; float: left; height: 24px; margin: 0px 10px 0px 0px; width: 24px; } nav.contacts a:nth-child(2) { border-left: 1px solid #0e9594; margin: 10px 10px 10px 0px; } section.content { padding-bottom: 50px; } section.content article { margin: 0px calc( 15% - 30px ); } section.content p, section.content ul li { font-size: 16px; } section.content p a.button { background: #ffffff; border-color: #0e9594; color: #0e9594; } section.whois { } section.whois article { float: left; padding: 50px 0px; width: calc( 70% - 360px ); } section.whois article.cqc { height: auto; margin: 20px 30px 0px 15%; padding: 10px 0px 20px 0px; width: 300px; } section.whois article.cqc > p { text-align: center; }  section.whois article.cqc > div { display: block; margin: 20px 30px 0px 30px; } section.whois:after { clear: both; content: ''; display: block; } } @media ( min-width: 1100px ) { header nav a { font-size: 16px; } } @media ( min-width: 1200px ) { header nav { width: calc( ( 90% - 60px ) / 3 ); } header nav:nth-child(1) { margin-left: calc( 5% + 30px ); } } @media ( min-width: 1500px ) { header nav { width: calc( ( 70% - 60px ) / 3 ); } header nav:nth-child(1) { margin-left: calc( 15% + 30px ); } }