*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0; }

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

body {
	font-family: 'Lato', Calibri, Arial, sans-serif;
	color: #494748;
	background: #ffffff;
    overflow-x: hidden;
}

a {
    color:#494748;
	text-decoration: none;
}

a:hover, a:active {
	color: #f37029;
}

header a {
	color: #f37029;
    transition: all 0.5s ease;
}

header a:hover, a:active {
	color: #d85d27;
}

#social-icons {
    position: relative;
    width: 200px;
    left: 50%;
    margin-left: -112px;
    margin-top: 15px;
}

ul {
    list-style-type: none;
    margin: 0 !important;
}

li {
    float: left;
    margin:0 3px 0 3px;
}

ul li img {
    width:30px;
}

#ad-block {
    position: absolute;
    bottom: -100px;
    text-align: center;
    width: 100%;
    font-size: 12px;
}

.container > header {
	float: left;
	width: 100%;
    margin-top:  80px;
    margin-bottom: 40px;
}

.container > header h1 {
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 40px;
    line-height: 1;
    margin-top: 10px;
    margin-bottom:1px;
    text-align: center;
}

header p {
    font-weight: 300;
    margin-top: 0px;
    text-align: center;
}

#logo {
    position: relative;
    left:50%;
    margin-left: -50px;
    width: 100px;
}

#logo img {
    width:100px;
}

.md-trigger {cursor: pointer;}

.column {
    width: 100%;
    text-align: center;
}

.column a {
    transition: all 0.5s ease;
}

.column-half {
    float: left;
	width: 49%;
	position: relative;
    padding:10px;
}

.column-fourth {
	float: left;
	width: 24%;
	position: relative;
    margin-left: 5px;
    margin-right: 5px;
}

.column-fourth img {
    max-width: 90%;
}

.column-left {
	float: left;
	width: 30%;
	padding-right: 20px;
	min-height: 300px;
	position: relative;
}

.column-right {
	float: left;
	width: 70%;
	min-height: 300px;
	position: relative;
}

.column p {
	font-weight: 300;
	font-size: 2em;
	padding: 0;
	margin: 0;
	line-height: 1.5;
}

video {
  width: 100%;
  height: auto;
    border:1px solid gray;
}

/* To Navigation Style */
.codrops-top {
    position: fixed;
	background: #494748;
	text-transform: uppercase;
	width: 100%;
	font-size: 0.79em;
	line-height: 2.2;
    z-index: 9999;
}

#top-links {
    color:white;
    position: relative;
    width: 338px;
    left:50%;
    margin-left: -169px;
}

.codrops-top a {
    color:white;
	padding: 0 1em;
	letter-spacing: 0.1em;
	display: inline-block;
    transition: all 0.5s ease;
}

.codrops-top a:hover {
	color: #f37029;
}

.codrops-top span.right {
	float: right;
}

.codrops-top span.right a {
	float: left;
	display: block;
}

.codrops-icon:before {
	font-family: 'codropsicons';
	margin: 0 4px;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

.codrops-icon-drop:before {
	content: "\e001";
}

.codrops-icon-prev:before {
	content: "\e004";
}

button {
	border: none;
	padding: 5px;
	background: #f37029;
	color: #fff;
	font-family: 'Lato', Calibri, Arial, sans-serif;
	font-weight: 400 !important;
    font-size: 16px !important;
	text-transform: uppercase;
	cursor: pointer;
	width: 150px;
    margin-top: 10px !important;
    transition: all 0.5s ease;
}

button:hover {
	background: #d85d27;
}

#laptop-phone img {
    max-width:100%;
}

#bio-photo img {
    max-width:100%;
    box-shadow: 3px 3px 10px #ccc;
    border: 5px solid white;
}

#logo-design img {
    max-width:60%;
}

.main-row {
    width: 100%;
	float: left;
    padding: 5% 10% 5% 10%;
    background-color: white;
}

.main-row p {
    font-weight: 300;
    font-size: 16px;
    margin-top: 0px;
}

h2 {margin-bottom: 1px;letter-spacing: 1px;}

#big-button {
    color: white;
    background-color: #f37029;
    padding: 5px;
    font-weight: 400;
    font-size: 16px;
    width: 150px;
    text-align: center;
    position: relative;
    margin-bottom: 10px;
    transition: all 0.5s ease;
}

#big-button:hover {
    background-color:#d85d27;
}

#big-button a {color:white !important;}

#signature img {
    width:200px;
}

#close-button img {
    width:10px !important;
}

@media only screen and (max-width: 1265px) and (min-width: 1px) {
    
    .column-fourth {
		width: 50%;
		min-width: auto;
		min-height: auto;
        margin: 8px 0 8px 0;
	}
}

@media only screen and (max-width: 1000px) and (min-width: 700px) {
    
    .column-left {
		width: 40%;
		min-width: auto;
		min-height: auto;
	}
    
    .column-right {
		width: 60%;
		min-width: auto;
		min-height: auto;
		padding: 1em; 
	}
    
    .column-half {
		width: 100%;
		min-width: auto;
		min-height: auto;
        padding: 1em;
	}
    
    .main-row {
        padding: 5% 5% 5% 5%;
    }
}

@media only screen and (max-width: 700px) and (min-width: 1px) {
    
    h2, .main-row p {text-align: center;}
    .biography p {text-align:left !important;}
    header p {margin: 10px 45px !important;}
    
    #big-button {left:50%;margin-left: -75px;}

    .column-left {
		width: 100%;
		min-width: auto;
		min-height: auto;
        padding: 1em;
	}
    
    .column-right {
		width: 100%;
		min-width: auto;
		min-height: auto;
		padding: 1em; 
	}
    
    .column-half {
		width: 100%;
		min-width: auto;
		min-height: auto;
        padding: 1em;
	}
    
    .main-row {
        padding: 5% 5% 5% 5%;
    }
}