/* Font Awesome icons font */
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); /* Full icons list: http://fontawesome.io/icons/ */

/* Google fonts */
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,600');

html{
    position: relative;
    height: 100%;
    width: 100%;
}

body{
    position: relative;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    color: #333;
    margin: 0;
    width: 100%;
    font-size: 14px;
    line-height: 1.6em;
    background-color: #fcfcfc; /* Ensure Bg Colour is Same As Shorter Column */
    overflow-x: hidden;
    overflow-y: auto;
}

.color{
    color: #2095f2;
}

a{
    color: #2095f2;
    text-decoration: none;
    outline: none;
}

a,
.fa,
.jssocials-share-label,
.close{
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

a:hover,
a:focus{
    color: #444;
    text-decoration: none;
    outline: none;
}

h1, h2, h3, h4, h5, h6{
    color: #363636;
    font-weight: 400;
    line-height: 1.5em;
    margin-top: 0;
    margin-bottom: 10px;
}

h3{
    font-size: 18px;
    font-weight: 300;
    color: #a1a1a1;
}

h1{
    margin-top: -5px;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -1px;
}

h1 span,
h2 span,
h3 span{
    font-weight: 600;
 }

.intro{
    font-size: 18px;
    line-height: 32px;
}

address{
    display: inline;
    margin-bottom: 0;
}

footer{
    color: #fff;
    background: #2095f2;
}

.loader{
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 99999;
	background: #fff;
}

.loader .icon{
	border: 8px solid #f6f7f7;
	border-top: 8px solid #2095f2;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	animation: spin 1s linear infinite;
	display: table;
	margin: -30px auto 0 auto;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

#company-banner{
    height: 80px;
    padding: 0;
    background: #fff;
    float: none;
}

#company-banner .header-left-col{
    height: 80px;
    padding: 15px 0 15px 6%;
}

#company-banner .header-right-col{
    height: 80px;
    padding: 15px 6% 15px 0;
}

#company-banner img{
    height: auto;
    width: auto;
    max-height: 50px;
    max-width: 100%;
    width: auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.contact-buttons{
    margin-top: 25px;
}

.button{
    display: inline-block;
}

.button .fa{
    display: block;
    background: #2095f2;
    color: #fff;
    font-size: 20px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    margin: 10px 5px 5px 5px;
}

.button:hover .fa,
.button:focus .fa{
    background: #363636;
}

.button span{
    color: #a1a1a1;
    display: block;
}

.social-links{
    margin-top: 25px;
}

.social-links a{
    color: #a1a1a1;
    margin: 7px;
    display: inline-block;
    font-size: 18px;
}

.social-links a:hover,
.social-links a:focus{
    color: #2095f2;
}

.right-top-col{
    padding: 1% 1%;
    position: relative;
}

.right-top-col h1{
    font-size: 2.75rem;
    line-height: 3.5rem;
}

.right-top-col h1 span{
    font-size: 3.5rem;
}

.right-top-col p{
    padding: 3% 0 0 0;
}

.right-top-col hr{
    margin: 6% 0;
}

.profile-pic{
    border-radius: 50%;
    webkit-border-radius: 50%;
    margin: 0 auto 40px auto;
    width: 100%;
    max-width: 300px;
}

.link-col{
    padding: 0 30px 10px 30px;
    /* min-height: 85px; */
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.link-col a,
#company-banner a{
    color: #333;
    line-height: 175%;
    font-size: 15px;
}

#company-banner a{
    line-height: 100%;
    display: block;
    padding: 5px 0;
}

.link-col a:hover,
.link-col a:focus,
#company-banner a:hover,
#company-banner a:focus{
    color: #2095f2;
}

.link-col .fa{
    width: 30px;
    margin-left: -30px;
    text-align: center;
}

#company-banner .fa{
    margin-right: 5px;
}

footer{
    padding: 0 !important;
}

footer a{
    color: #fff;
}

.copyright{
    background: #363636;
    padding: 20px 6%;
}

.copyright p{
    padding: 0 15px;
}

.copyright a:hover,
.copyright a:focus{
    color: #2095f2;
}

.footer-button-col{
    padding: 20px 0;
    background: #2095f2;
}

.footer-button{
    display: block;
    margin: 10px 0 5px 0;
    text-align: center;
    clear: none;
    float: left;
    width: 25%;
}

.footer-button .fa{
    display: block;
    color: #fff;
    font-size: 28px;
    margin-bottom: 5px;
}

.footer-button span{
    display: block;
    font-size: 12px;
}

.footer-button:hover .fa,
.footer-button:focus .fa{
    color: #363636;
}

.footer-button .fa{
    display: block;
    color: #fff;
    font-size: 28px;
}

.modal-header,
.modal-footer{
    border: 0;
}

.modal-body{
    padding: 15px 25px;
}

.close{
    color: #363636;
}

.modal-body h3{
    color: #363636;
    font-weight: 400;
    margin-top: 40px;
    font-size: 28px;
    line-height: 34px;
}

.modal-body ul{
    margin-left: -15px;
}

/* Vertically Align Modal */
.vertical-alignment-helper{
    display:table;
    height: 100%;
    width: 100%;
    pointer-events:none;
}

.vertical-align-center {
    display: table-cell;
    vertical-align: middle;
    pointer-events:none;
}

.modal-content {
    width:inherit;
    height:inherit;
    margin: 0 auto;
    pointer-events: all;
    border-radius: 3px;
    max-width: 90%;
}
/* Vertically Align Modal */


.jssocials-share{
    color: #a1a1a1;
    margin: 15px 10px;
    display: inline-block;
}

.jssocials-share-logo{
    display: block;
    font-size: 28px;
    color: #a1a1a1;
    margin: 0 auto 5px auto;
}

.jssocials-share-label{
    color: #a1a1a1;
    font-size: 12px;
}

.jssocials-share:hover .jssocials-share-logo,
.jssocials-share:focus .jssocials-share-logo,
.jssocials-share:hover .jssocials-share-label,
.jssocials-share:focus .jssocials-share-label{
    color: #363636;
}

/* Media Queries */
@media only screen and (max-width: 992px) {
    .profile-pic{
        max-width: 200px;
    }
    
    .link-col{
        padding-bottom: 20px;
        min-height: auto;
    }
    
    .left-col,
    .right-top-col{
        padding: 60px 6%;
    }
    
    .right-top-col:before{
        content: "\A";
        border-style: solid;
        border-width: 14px 14px 0px 14px;
        border-color: #f6f7f7 transparent transparent;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        width: 28px;
        margin: 0 auto;
    }
    
    .right-top-col h1{
        font-size: 2.25rem;
        line-height: 3.25rem;
    }
    
    .right-top-col h1 span{
        font-size: 3.00rem;
    }
    
    .footer-button-col{
        height: 80px;
        padding: 5px 0;
        position: fixed;
        bottom: 0;
        z-index: 999;
        width: 100%;
    }
    
    body{
        padding-bottom: 80px;
    }
}

@media only screen and (max-width: 600px) {
    #company-banner a{
        font-size: 12px;
    }
    
    #company-banner .header-right-col{
        padding: 17px 6% 15px 0;
    }
    
    .left-col,
    .right-top-col{
        padding: 40px 6%;
    }
    
    .profile-pic{
        max-width: 150px;
        margin: 0 auto 20px auto;
    }
    
    .profile-pic.company-profile-pic{
        max-width: 120px;
        margin: -5px auto 20px auto;
    }

    .right-top-col hr{
        margin: 10% 0;
    }
    
    .right-top-col h1{
        font-size: 32px;
        line-height: 44px;
    }
    
    .right-top-col h1 span{
        font-size: 40px;
    }
}

@media only screen and (max-width: 320px) {
    .left-col,
    .right-top-col{
        padding: 30px 6%;
    }
    
    .contact-buttons{
        margin-top: 15px;
    }
    
    .footer-button span{
        font-size: 11px;
    }

}

/* 5. Animations */
@keyframes spin{
	0%{
        transform: rotate(0deg);
    }
    
	100%{
        transform: rotate(360deg);
    }
}

.margin-1 {
    margin: .25em;
}

.margin-2 {
    margin: .5em;
}

.margin-3 {
    margin: 1em;
}

.margin-4 {
    margin: 1.5em;
}

.margin-5 {
    margin: 3em;
}

.margin-x-1 {
    margin: .25em 0;
}

.margin-x-2 {
    margin: .5em 0;
}

.margin-x-3 {
    margin: 1em 0;
}

.margin-x-4 {
    margin: 1.5em 0;
}

.margin-x-5 {
    margin: 3em 0;
}

.margin-y-1 {
    margin: 0 .25em;
}

.margin-y-2 {
    margin: 0 .5em;
}

.margin-y-3 {
    margin: 0 1em;
}

.margin-y-4 {
    margin: 0 1.5em;
}

.margin-y-5 {
    margin: 0 3em;
}

.margin-top-1 {
    margin-top: .25em;
}

.margin-top-2 {
    margin-top: .5em;
}

.margin-top-3 {
    margin-top: 1em;
}

.margin-top-4 {
    margin-top: 1.5em;
}

.margin-top-5 {
    margin-top: 3em;
}

.margin-right-1 {
    margin-right: .25em;
}

.margin-right-2 {
    margin-right: .5em;
}

.margin-right-3 {
    margin-right: 1em;
}

.margin-right-4 {
    margin-right: 1.5em;
}

.margin-right-5 {
    margin-right: 3em;
}

.margin-bottom-1 {
    margin-bottom: .25em;
}

.margin-bottom-2 {
    margin-bottom: .5em;
}

.margin-bottom-3 {
    margin-bottom: 1em;
}

.margin-bottom-4 {
    margin-bottom: 1.5em;
}

.margin-bottom-5 {
    margin-bottom: 3em;
}

.margin-left-1 {
    margin-left: .25em;
}

.margin-left-2 {
    margin-left: .5em;
}

.margin-left-3 {
    margin-left: 1em;
}

.margin-left-4 {
    margin-left: 1.5em;
}

.margin-left-5 {
    margin-left: 3em;
}

.button-color {
    background-color: #78909C;
}

.button-text {
    color: white;
    font-weight: bold;
}

.header-color {
    background-color: #78909C;
}

.header-text {
    color: white;
}

.advert-border {
    border: 1px solid #78909C;
    color: #78909C;
    height: 4rem;
    padding-top: 1.3rem;
}
.vertical-align {
    display: flex;
    align-items: center;
}

.margin-0-auto {
    margin: 0 auto !important;
}

.image-height {
    max-height: 200px !important;
}

/* On screens that are 992px or less, set the background color to blue */
@media screen and (max-width: 992px) {
    .image-height {
        max-height: 200px !important;
    }
}

/* On screens that are 600px or less, set the background color to olive */
@media screen and (max-width: 600px) {
    .image-height {
        max-height: 100px!important;
    }
}