/*------------------------------

	Buchanan Barry - STYLESHEET

	0. Font Faces
	1. General / Reset
	2. Page
		2A. Header
		2B. Body
		2C. Footer
	3. Misc
	4. Responsive Cases - Scale Down to 750
	5. Responsive Cases - Scale Down to 400
		
 
------------------------------*/


/*------------------------------
    0. FONT FACES 
------------------------------*/

    @font-face {
		font-family: 'BebasNeue-Book';
		src: url('../fonts/BebasNeue Book.eot');
		src: url('../fonts/BebasNeue Book.woff') format('woff'),
			 url('../fonts/BebasNeue Book.eot'),
			 url('../fonts/BebasNeue Book.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
		}
		
     @font-face {
		font-family: 'BebasNeue-Regular';
		src: url('../fonts/BebasNeue Regular.eot');
		src: url('../fonts/BebasNeue Regular.woff') format('woff'),
			 url('../fonts/BebasNeue Regular.eot'),
			 url('../fonts/BebasNeue Regular.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
		}

     @font-face {
		font-family: 'ProximaNova-Bold';
		src: url('../fonts/ProximaNova-Bold.eot');
		src: url('../fonts/ProximaNova-Bold.woff') format('woff'),
			 url('../fonts/ProximaNova-Bold.eot'),
			 url('../fonts/ProximaNova-Bold.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
		}

     @font-face {
		font-family: 'ProximaNova-Regular';
		src: url('../fonts/ProximaNova-Regular.eot');
		src: url('../fonts/ProximaNova-Regular.woff') format('woff'),
			 url('../fonts/ProximaNova-Regular.eot'),
			 url('../fonts/ProximaNova-Regular.ttf') format('truetype');
		font-weight: normal;
		font-style: normal;
		}
/*------------------------------
    1. GENERAL / RESET
------------------------------*/
	
	* {
		margin: 0;
		padding: 0;
		font-size: 100%;
		line-height: 110%;
		box-sizing: border-box;
		-webkit-text-size-adjust: none;
		}
	html {
		min-height: 100%;
		}		
	body {
		margin: 0;
		padding: 0;
		height: 100%;
		background: #e7edf2;
		color: #111;
		font-family: 'ProximaNova-Regular', Helvetica, arial, sans-serif;
		font-size: 16px;
		line-height: 120%;
		}	
	article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
		display: block;
		}
	table {
		border-collapse: collapse;
		border-spacing: 0;
		}
	ol, ul {
		list-style: none;
		}
	audio, canvas, video {
		display: inline-block;
		*display: inline;
		*zoom: 1;
		}
	img {
		border: 0;
		vertical-align: top;
		}
	h1 {	
		margin: 0;
		padding: 0;		
		font-family: 'BebasNeue-Regular', Helvetica, arial, sans-serif;
		font-weight: normal;
		color: #fff;
		font-size: 50px;
		line-height: 130%;
		}
	h2 {	
		margin: 0 0 10px 0;
		padding: 0;		
		font-family: 'BebasNeue-Book', Helvetica, arial, sans-serif;
		font-weight: normal;
		color: #000;
		font-size: 48px;
		line-height: 130%;
        letter-spacing: 1.5px;
		}
	h3 {
		margin: 0;
		padding: 0;
		font-family: 'BebasNeue-Book', Helvetica, arial, sans-serif;
		font-weight: normal;
		color: #000;
		font-size: 25px;
		line-height: 130%;
		}		
	hr {
		height: 6px;
		border-top: 2px solid rgba(148, 194, 211, 0.35);
        border-bottom: 2px solid rgba(148, 194, 211, 0.35);
        border-left: none;
        border-right: none;
		background: none;
        outline: none;
		margin: 0 0 25px 0;
		padding: 0;
        width: 100%;
		clear: both;
		}	
	p {		
		margin: 0 0 30px 0;
		padding: 0;
		line-height: 135%;
		}	
	a:hover, a:active, a:focus, object { 
		outline: none; 
		}			
	a {
		text-decoration: none;
		color: #fff;	
		transition: color .18s;
		}
	a:hover {
		color: #fff;
		}
	form, 
	input {
		margin: 0;
		padding: 0;
		border-radius:0; 
		}	
	textarea {
		margin: 0;
		padding: 0;
		border-radius:0; 
		overflow: auto;
		vertical-align: top;
		resize: none;
		}
	blockquote {	
		padding: 40px;
		background: #fff;
		color: #000;
		box-shadow: 1px 1px 6px rgba(0,0,0,0.15);
		}
	sup,
	sub {
		font-size: 13px;
		line-height: 10px;
		}
	strong {
		font-family: 'ProximaNova-Bold', Helvetica, arial, sans-serif;
        /*font-weight: 600;*/
		}
    button {
        border: none;
        }
    button::-moz-focus-inner,
    input::-moz-focus-inner {
        border: 0;
        padding: 0;
        }
    .button {
        display: inline-block;
        font-family: 'BebasNeue-Regular', Helvetica, arial, sans-serif;
        font-size: 26px;
        letter-spacing: .15em;
        margin-bottom: 40px;
        font-weight: normal;
		font-style: normal;
        }

/*------------------------------
    2. PAGE LAYOUT 
------------------------------*/
	
			
	/*------------------------------
		2A. HEADER 
	------------------------------*/
    header {
        text-align: center;
        padding: 145px 0 0 0;
        background: #fff url(../img/bg-header.jpg) center bottom no-repeat;
        background-size: cover;
        }
        header img {
            max-width: 217px;
            width: 80%;
            height: auto;
            margin-bottom: 25px;
            }
        header h1 {
            width: 100%;
            background: #42baea;
            padding: 25px 5% 14px 5%;
            }


	/*------------------------------
		2B. BODY 
	------------------------------*/
    
    main .feature {
        width: 100%;
        background: #fff;
        padding: 55px 5% 15px 5%;
        }
        main .feature > div {
            max-width: 1000px;
            margin: 0 auto;
            display: table;
            }
            main .feature > div > img {
                display: table-cell;
                max-width: 110px;
                vertical-align: top;
                }
            main .feature > div > div {
                display: table-cell;
                width: 850px; 
                vertical-align: top;
                padding-left: 5%
                }

     main .light-feature {
        
        }
        .light-feature > div h2 {

            }
        .light-feature > div p {

            }
        .light-feature > div .button {
            color: #42baea;
            border: 3px solid #42baea;
            background: #fff;
            padding: 12px 27px 7px 27px;
            transition: .25s;
            }
            .light-feature > div .button:hover {
                color: #fff;
                border: 3px solid #42baea;
                background: #42baea;
                }

    main .dark-feature {
        background: #536d90;
        }
        .dark-feature > div h2 {
            color: #fff;
            }
        .dark-feature > div p {
            color: #fff;
            opacity: .9;
            }
        .dark-feature > div .button {
            background: hsla(197, 80%, 59%, 0.99);
            border: 3px solid #42baea;
            color: #fff;
            padding: 12px 27px 7px 27px;
            transition: .25s;
            }
            .dark-feature > div .button:hover {
                background: hsla(197, 80%, 59%, 0);
                border: 3px solid #42baea;
                color: #42baea;
                }

    main .freeze-feature {
        background: #536d90 url(../img/bg-time.jpg) center center no-repeat;
        background-size: cover;
        }
    main .personnel-feature {
        background: #536d90 url(../img/bg-personnel.jpg) center center no-repeat;
        background-size: cover;
        }




	/*Lists*/
	.feature ul {
        opacity: .9;
		}
		.feature ul li {
            background: url(../img/arrow.png) 10px 0 no-repeat;
            background-size: 10px auto;
            padding: 0 0 20px 35px;
            text-align: left;
			}
		/*PDF*/
		.feature ul .pdf {

			}


		
	/*------------------------------
		2C. FOOTER 
	------------------------------*/
        footer {
            text-align: center;
            padding: 70px 0 0 0;
            background: #536d90 url(../img/bg-footer.jpg) 0 0 no-repeat;
            }
            footer p {
                font-size: 18px;
                letter-spacing: 1.4px;
                color: #fff;
                opacity: .9;
                margin-bottom: 40px;
                padding: 0 5%;
                }
            footer .button {
                border: 3px solid #fff;
                padding: 13px 27px 6px 27px;
                background: rgba(255, 255, 255, 1);
                color: #42baea;
                font-family: 'BebasNeue-Regular', Helvetica, arial, sans-serif;
                font-size: 34px;
                letter-spacing: .13em;
                margin: 0 5% 40px 5%;
                transition: .3s;
                }
                footer .button:hover {
                    background: rgba(255, 255, 255, 0);
                    color: #fff;
                    }

            footer .contact {
                display: table;
                margin: 0 auto 60px auto;
                padding: 0 5%;
                }
                footer .contact li {
                    display: table-cell;
                    border: 2px solid #fff;
                    border-right: none;
                    color: #fff;
                    font-family: 'BebasNeue-book', Helvetica, arial, sans-serif;
                    font-size: 16px;
                    letter-spacing: .15em;
                    padding: 18px 0 14px 0;
                    background: rgba(255, 255, 255, 0);
                    transition: .2s;
                    }
                    footer .contact li:hover {
                        background: rgba(255, 255, 255, .15);
                        }
                    footer .contact li:last-child {
                        border-right: 2px solid #fff;
                        }
                    footer .contact li a {
                        color: #fff;
                        padding: 18px 25px 14px 25px;
                        }
            footer small {
                display: block;
                font-size: 13px;
                letter-spacing: .1em;
                opacity: .6;
                width: 100%;
                padding: 25px 5% 20px 5%;
                text-align: center;
                background: rgba(0, 0, 0, 0.3);
                color: #fff;
                }
                footer small br {
                    display: none;
                    }		

		
								
/*------------------------------
   	3. MISC
------------------------------*/
	
	.clear {
		clear: both;
		}	
	.clearfix:after {
		visibility: hidden;
		display: block;
		font-size: 0;
		content: " ";
		clear: both;
		height: 0;
		}
	

				
	
/*----------------------------------------------------------------------------------------------------------------------------------------
   	4. Responsive Cases - Scale Down to 750
----------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 750px) {
    h1 {
		font-size: 36px;
		}
	h2 {	
		font-size: 36px;
		} 
    
    /*Header*/
    header {
        padding: 125px 0 0 0;
        }
    
    /*Main*/
    main .feature {
        padding: 40px 5% 5px 5%;
        text-align: center
        }
     main .feature > div {
            display: block;
            }
            main .feature > div > img {
                display: block;
                margin: 0 auto 30px auto;
                }
            main .feature > div > div {
                width: 100%; 
                }
    
    /*Footer*/
    footer p {
        font-size: 16px;
        letter-spacing: 1px;
        color: #fff;
        margin-bottom: 30px;
        }
    footer .button {
        padding: 16px 30px 9px 30px;
        font-size: 24px;
        }
    footer .contact {
        display: block;
        margin: 0 auto 50px auto;
        }
        footer .contact li {
            display: block;
            border: none;
            border-bottom: none;
            padding: 10px 0 4px 0;
            }
            footer .contact li:last-child {
                border-right: none;
                }
    footer small br {
        display: inline;
        }
}

/*----------------------------------------------------------------------------------------------------------------------------------------
   	5. Responsive Cases - Scale Down to 400
----------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 400px) {
	header {
        padding: 40px 0 0 0;
        background: #fff url(../img/bg-header.jpg) center -75px no-repeat;
        background-size: ;
        }
}