/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */


body{ color: #000; font-size: 24px; line-height: 40px; font-family: 'Open Sans', sans-serif;}
.landing-page{ background: url('../img/main-bg.jpg') no-repeat center top; background-size: cover; background-attachment: fixed; }
.landing-page2{ background: url('../img/main-bg2.jpg') no-repeat center top; background-size: cover; background-attachment: fixed; }
.contact-page{ background: url('../img/contact-bg.jpg') repeat 50% 50%; background-attachment: fixed; }
a{ color: #000; text-decoration: none;}

h3{ font-family: 'Open Sans Condensed', sans-serif; font-size: 24px; line-height: 40px; margin: 0 0 20px 0;}
#wraper{ width: 100%; height: 100%; position: relative;}
p{ padding-bottom: 30px; margin: 0;}

.landing-page .header-part{ width: 94%; padding: 20px 0 0 0; margin: 0 auto;}
.landing-page .logo-part{ float: left;}
.landing-page .logo-part span{ width: 100%; display: block;}
.landing-pageb .logo-part span a{ display: block;}

.landing-page .navigation{ margin: 30px auto 0; float: right;}
.landing-page .navigation ul{ padding: 0; margin: 0;}
.landing-page .navigation ul li{ list-style-type: none; float: left; background: url('../img/arrow-white.png') no-repeat 100% 50%; padding: 0 30px;}
.landing-page .navigation ul li a{ display: block; font-family: 'Open Sans Condensed', sans-serif; color:#fff; font-size: 30px; line-height:30px; font-weight: 700; text-transform: uppercase;}
.landing-page .navigation ul li a:hover{ color: #ed0f7e;}

#content-wrap{ width: 100%; position: relative;}
.container{ max-width: 1000px; margin: 0 auto;}

.landing-bottom-content{ width: 94%; padding:15px 3%; background: #646464; position: fixed; bottom: 0; left: 0; text-align: center;}
.landing-bottom-content p{ font-weight: 700; color: #fff; font-size: 18px; line-height:26px; margin: 0; padding: 0;}

.inside-page .logo-part{ background: #949599; width:100%; margin: 0 auto; padding: 30px 0 50px;}
.inside-page .logo-part span{ max-width:1000px; display: block; margin: 0 auto;}
.inside-page .navigation{ max-width: 1050px; margin: 0 auto 20px; padding: 30px 0;}
.inside-page .navigation ul{float: none; text-align: center; padding: 0; margin: 0;}
.inside-page .navigation ul li{ float: left; list-style-type: none; display: inline-block; background: url('../img/arrow.png') no-repeat 100% 50%; padding: 0 30px;}
.inside-page .navigation ul li a{ display: block; font-family: 'Open Sans Condensed', sans-serif; font-size: 30px; line-height:30px; font-weight: 700; text-transform: uppercase;}
.inside-page .navigation ul li a:hover{ color: #ed0f7e;}

.contact-page .header-part{ width: 94%; padding: 20px 0 0 0; margin: 0 auto;}
.contact-page .logo-part{ float: left;}
.contact-page .logo-part span{ width: 331px; display: block;}
.contact-page .logo-part span a{ display: block;}


.container ul{ padding: 0; margin: 0 0 30px 0;}
.container ul li{ list-style-type: none; background: url('../img/bullet.png') no-repeat 0 14px; padding: 0 0 7px 30px;}

/*----About Start----*/

.about-img{ width: 100%; margin-top: 50px;}
.about-img ul{ padding: 0; margin: 0;}
.about-img ul li{ list-style-type: none; float: left; display: block; width:24.62%; margin-right: .5%; margin-bottom: .5%; overflow: hidden; background: #fff;}
.about-img ul li:nth-child(4n+4){ margin-right: 0;}
.about-img ul li img{ width:100%; transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; cursor: pointer;}
.about-img ul li img:hover{transform: scale(1.1); -moz-transform: scale(1.1); -webkit-transform: scale(1.1); opacity: .5; transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out;}

/*----About End----*/

/*----Contact Start----*/

.contact-content{ width: 94%; transform: translateY(-35%); position: relative; margin: 0 auto; top: calc(50% - 140px);}
.contact-home{ position: absolute; display: block; left: 0; top: calc(50% - 16px);}
.contact-about{ display: block; position: absolute; right:0; top: calc(50% - 16px); }
.contact-content h4{ width:100%; text-align: center; margin: 0; font-size: 42px; text-transform: uppercase; font-family: 'Open Sans Condensed', sans-serif; line-height: 52px;}
.contact-content h4 a{ text-transform: lowercase;}
.contact-content h4 a:hover{color: #fff;}
.contact-home a{ font-size: 40px; font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; line-height: 158px; display: block; text-transform: uppercase; background: url('../img/link-arrow-left.png') no-repeat 0 50%; padding-left: 65px;}
.contact-home a:hover{ color: #fff;}

.contact-about a{ font-size: 40px; font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; line-height: 158px; display: block; text-transform: uppercase; background: url('../img/link-arrow.png') no-repeat 100% 50%; padding-right: 65px;}
.contact-about a:hover{ color: #fff;}
.source-link{ position: absolute; bottom: 40px; text-align: center; width: 100%;}
.source-link a{ font-size: 40px; font-family: 'Open Sans Condensed', sans-serif; font-weight: 700; line-height: 39px; display: block; text-transform: uppercase; background: url('../img/link-arrow-down.png') no-repeat 50% 100%; padding-bottom: 87px;}
.source-link a:hover{ color: #fff;}

/*----Contact End----*/









/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers:
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (max-width: 1460px){
	
	/*body{ background: #fefe01;}
	.landing-page{ background: #fefe01;}
	.contact-page{ background: #fefe01;}*/
	
	.landing-page .logo-part span{ max-width:331px; }
	.landing-page .logo-part span img{ width:100%; }
	.landing-page .navigation{ margin-top:20px; }
	.landing-page .navigation ul li{ padding:0 25px; }
	.landing-page .navigation ul li a{ font-size: 22px; line-height: 30px;}
	
	.contact-page .logo-part span{ max-width:331px; }
	.contact-page .logo-part span img{ width:100%; }
}
@media only screen and (max-width: 1365px){
.landing-bottom-content{ padding:12px 3% }
/*.landing-bottom-content p{ font-size:24px; line-height:30px }*/
}
@media only screen and (max-width: 1170px){	
	/*body{ background: #ff0000}
	.landing-page{ background: #ff0000}
	.contact-page{ background: #ff0000}*/	
	.contact-content h4{ font-size:30px; }	
}
@media only screen and (max-width: 1090px){
.landing-bottom-content{ padding:12px 3% }
/*.landing-bottom-content p{ font-size:20px; line-height:26px }*/
}
@media only screen and (max-width: 1024px){
	
	/*body{ background: #15fd02}
	.landing-page{ background: #15fd02}
	.contact-page{ background: #15fd02}*/
	
	.inside-page .header-part{ margin-bottom:30px; }
	
	.inside-page .logo-part{ width:94%; padding:30px 3% 50px; }
	.inside-page .logo-part span{ max-width: inherit; width:100%; }
	.inside-page .logo-part span a img{ display: block; width:100%; height: auto; }
	.inside-page .navigation{ max-width: inherit; width:94%; padding:30px 3%;}
	.container{ max-width: inherit; width:94%; padding:0 3%; }
	
	.mean-container #wraper{ margin-top: 42px;}
	.contact-home a{ padding-left:26px; font-size:20px; line-height:30px; background-size:16px; }
	.contact-about a{ padding-right:26px; font-size:20px; line-height:30px; background-size:16px; }
	.source-link a{ font-size:20px; line-height:30px; padding-bottom:20px; background-size:30px; }
	.landing-bottom-content p{ font-size:16px; line-height:26px; }
	
}

@media only screen and (max-width: 767px){
	
	/*body{ background: #01f1fe}
	.landing-page{ background: #01f1fe}
	.contact-page{ background: #01f1fe}*/
	
	body{ font-size:14px; line-height:22px;}
	h3{ margin:0 0 10px; font-size:18px; line-height:30px; }
	p{ padding-bottom:20px;}
	.container ul{ margin-bottom:20px; }
	.container ul li{ background-size: 10px; padding: 0 0 15px 20px; background-position: 0 8px;}
	
	.about-img{ margin-top:30px; }
	.about-img ul li{ margin-right: 1%; width: 49.5%; margin-bottom: 1%;}
	.about-img ul li:nth-child(2n+2){ margin-right:0; }
	
	.contact-content h4{ font-size: 16px; line-height: 30px;}
	.landing-bottom-content{ padding:10px 3%; }
	.landing-bottom-content p{ font-size:14px; line-height:22px; font-weight:300; }
	.contact-content{ top: calc(50% - 70px); transform: translateY(-50%); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%);}
	.source-link{ bottom:10px; }
	.source-link a{ font-size:16px; line-height: 20px;}
	.source-link a br{ display: none; }
	
}

@media only screen and (max-width: 640px){
	
	/*body{ background: #0d00ff}
	.contact-page{ background: #0d00ff}*/
	
	.contact-page .logo-part span img{ display: block; width: 260px;}
	.about-img ul li{ width: 100%; float: none; margin: 0 0 1% 0;}
	
	.contact-about a, .contact-home a{ font-size:0; }
	.landing-bottom-content{  padding:6px 3% }
	.landing-bottom-content p{ font-size:13px; line-height:19px; }
}

@media only screen and (max-width: 480px){
	
	/*body{ background: #ff00ec;}
	.contact-page{ background: #ff00ec}*/
.landing-bottom-content p{ font-size:11px; line-height:19px }
		
}

@media only screen and (max-width: 320px){
	
	/*body{ background: #e97a16;}
	.contact-page{ background: #e97a16}*/
		
}

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}