/* Padding doesn't affect width or height */

* 
{ 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
}


body
{
width:100%;
height:100%;
margin:0 auto;
padding:none;
}


.header_1
{
position:fixed;
top:0;
width:100%;
height:100px;
margin:0 auto;
background-color:none;
z-index:1000;
}


.header_2
{
max-width:1300px;
height:100px;
margin:0 auto;
margin-left:0 auto;
margin-right:0 auto;
}


.project_page_header
{
background-color:rgba(255, 255, 255, .75);
}


.logo
{
position:absolute;
height:40px;
margin-top:28px;
margin-left:100px;
}


.logo:hover
{
position:fixed;
height:43px;
transition:.1s;
}



.home_page_wrapper_1
{
margin:0 auto;
width:100%;
height:100vh;
background-image:url("../images/brand/background_pattern.jpg");
background-repeat:repeat;
background-size:400px;
}




.home_page_wrapper_2
{
margin:0 auto;
width:100%;
height:100vh;
background:rgb(255,255,255);
background:linear-gradient(180deg, 
rgba(255,255,255,.90) 0%, rgba(194,194,194,.98) 100%);\
}


.wrapper
{
width:100%;
height:100%;
margin:0 auto;
}


.top_space
{
width:100%
float:left;
height:150px;
}



p
{
padding:0;
margin:0;
}







/*............... WRAPPERS ..............*/

.wrapper_1
{
float:left;
width:100%;
padding:0px 100px 100px 100px;
}

.wrapper_2
{
margin:0 auto;
max-width:1300px;
}










/*............... SECTIONS ..............*/

.section_1
{
width:100%;
}


section_2
{
max-width:1500px;
text-align:center;
}











/*............... LINKS ..............*/

a
{
text-decoration:none;
padding:none;
margin:0;
font-weight:500;
color:rgb(0,0,0);
}


b
{
font-weight:500;
}


.design_box .home_page_email
{
font-family:fira sans, sans-serif;
font-weight:300;
font-size:21px;
letter-spacing:0px;
}








/*............... IMAGE CREDIT ..............*/

.image_credit
{
position:relative;
left:50px;
bottom:50px;
color:rgb(255, 255, 255);
font-family: fira sans, sans-serif;
font-weight:400;
font-size:18px;
text-shadow:0px 2px 1px rgba(0,0,0,.85);
}


.move_up
{
margin-top:-25px;
}











/*............... NAVIGATION ..............*/

.navigation_master_box
{
float:right;
right:80px;
margin-top:-19px;
margin-right:75px;
width:31px;
height:46px;
padding:60px;
}


.navigation_master_box:hover
{
padding-left:500px;
}


.nav_bar_1
{
position:absolute;
width:31px;
height:3px;
background-color:rgb(102, 102, 102);
margin-bottom:20px;
}

.nav_bar_2
{
position:absolute;
margin-top:10px;
width:31px;
height:3px;
background-color:rgb(102, 102, 102);
margin-bottom:20px;
}


.nav_links_outer_box_1
{
display:none;
position:fixed;
left:0;
top:100px;
width:100%;
height:500px;
padding:100px;
background-color:#FFFFFF;
box-shadow:0px 5px 10px rgba(0,0,0,.2); /* X, Y, Spread*/
}


.nav_links_outer_box_2
{
width:100%;
max-width:1150px;
margin:0 auto;
}


.nav_links_inner_box
{
float:left;
width:50%;
height:100%;
}


.nav_pic_box
{
float:left;
width:50%;
height:100%;
}


.nav_box_pic
{
margin:0 auto;
max-width:250px;
float:right;
}


.navigation_master_box:hover .nav_links_outer_box_1
{
display:block;
}


.navigation_master_box:hover .navigation_bars .nav_bar_1
{
position:fixed;
margin-top:10px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
transition:.13s;
}

.navigation_master_box:hover .navigation_bars .nav_bar_2
{
position:fixed;
margin-bottom:5px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
transition:.13s
}




.nav_links_outer_box_1 a
{
text-decoration:none;
font-family:fira sans, sans-serif;
font-size:27px;
font-weight:300;
color:rgb(102, 102, 102);
float:left;
padding:7px 3px 3px 25px; /* T R B L */
width:200px;
line-height:35px;
border-radius:25px;
}


.nav_links_outer_box_1 a:hover
{
color:rgb(255, 255, 255);
background-color:rgb(255, 21, 0);
}

















/*............... Mid section on home page ..............*/

.home_page_image
{
max-width:45%;
padding:8px;
border-radius:100%;
background: rgb(0,167,255);
background: linear-gradient(31deg, rgba(0,167,255,1) 0%, rgba(171,247,255,1) 100%);
box-shadow:0px 3px 4px rgba(0,0,0,.35);
}


.design_box
{
position:absolute;
top:35%;
width:100%;
text-align:center;
}


.design_box p
{
font-family:montserrat, sans-serif;
font-weight:700;
font-size:85px;
letter-spacing:8px;
margin-top:20px;
margin-bottom:20px;
}


.design_rule
{
margin:0 auto;
width:50%;
height:2px;
width:50%;
background-color:rgb(0,0,0);
}


.d:hover
{
color:rgb(255, 0, 0);
}

.e:hover
{
color:rgb(255, 208, 0);
}

.s:hover
{
color:rgb(51, 193, 0);
}

.i:hover
{
color:rgb(0, 169, 255);
}

.g:hover
{
color:rgb(255, 21, 0);
}

.n:hover
{
color:rgb(255, 208, 0);
}











/*............... PROJECT ICONS ..............*/


.project_icons_box
{
width:100%;
float:left;
margin:0 auto;
margin-top:200px;
padding:50px;
}


.project_icon
{
position:static;
width:20%;
margin:2%;
text-align:center;
border-radius:100%;
padding:20px;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
}


.project_icon:hover
{
position:static;
box-shadow:0px 5px 7px rgba(0,0,0,.35);
transition:.2s;
padding:5px;
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
filter: grayscale(0%);
}


.hardwood_outlet:hover
{
background-color:rgb(90, 181, 0);
}

.blue_apple_productions:hover
{
background-color:rgb(0, 127, 255);
}

.picsher:hover
{
background-color:rgb(255, 0, 80);
}

.animations:hover
{
background-color:rgb(207, 81, 39);
}

.kahve:hover
{
background-color:rgb(68, 40, 0);
}

.poster_exhibition:hover
{
background-color:rgb(48, 48, 48);
}

.snow_go:hover
{
background-color:rgb(214, 214, 214);
}

.youth_move_monroe:hover
{
background-color:rgb(255, 191, 0);
}

.wayfinding:hover
{
background-color:rgb(255, 93, 0);
}











/*............... PROJECT DESCRIPTION ..............*/

.project_description p
{
margin:0 auto;
font-family:fira sans, sans-serif;
font-size:19px;
line-height:28px;
font-weight:300;
width:100%;
max-width:1000px;
text-align:left;
padding:75px;
}

.project_description .center_text
{
text-align:center;
}












/*............... PROJECT PAGE ICON ..............*/

.project_page_icon_box
{
float:left;
width:100%;
padding:50px;
text-align:center;
}

.project_page_icon
{
width:200px;
}


.project_page_icon:hover
{
width:215px;
margin-top:-20px;
}


.project_page_top_space
{
margin-top:-45px;
}









/*............... PROJECT IMAGES ..............*/

.project_image
{
float:left;
width:100%;
margin:0 auto;
margin-top:-4px;
}


.project_width_limit
{
margin:0 auto;
max-width:1300px;
}








/*............... LOGOS ..............*/


.logos_box
{
float:left;
margin:0 auto;
width:100%;
height:auto;
}


.logos
{
width:45%;
margin:10px;
padding:20px;
border-radius:100%;
}


.logos:hover
{
box-shadow:0px 5px 5px rgba(0,0,0,.35); /* X Y Spread */
padding:0px;
}











/*............... ABOUT ME ..............*/

.about_me_section_1
{
max-width:1300px;
margin:0 auto;
height:auto;
padding:50px;
}


.about_me_section_2
{
width:100%;
margin:0 auto;
}


.about_me_box
{
width:50%;
padding:0px 50px 50px 50px; /* T R B L */
float:left;
}


.about_me_box h1
{
font-family:Montserrat, sans-serif;
font-size:21px;
font-weight:600;
margin-bottom:23px;
}


.about_me_box p
{
font-family:fira sans, sans-serif;
font-size:17px;
line-height:27px;
font-weight:300;
}


.profile_picture
{
width:100%;
margin:0 auto;
}


.download_resume_button
{
font-weight:400;
padding:8px 25px 8px 25px; /* T R B L */
border-radius:30px;
background-color:rgb(0, 140, 255);
color:rgb(255 , 255, 255);
}


.download_resume_button:hover
{
background-color:rgb(0, 195, 255);
}







/*............... ANIMATIONS ..............*/

.video_box
{
max-width:800px;
margin:0 auto;
margin-bottom:75px;
}

.iframe_box
{
width:100%;
height:auto;
}

.iframe_box iframe
{
width:95%;
min-height:398px;
}

.animation_box
{
text-align:center;
}


.animation_title
{
font-family:fira sans, sans-serif;
font-size:30px;
font-weight:300;
margin-bottom:10px;
}












/*............... FOOTER ..............*/


.home_page_footer
{
position:absolute;
bottom:0;
width:100%;
text-align:center;
padding-bottom:25px;
}


.home_page_footer p
{
font-family:fira sans;
font-weight:400;
color:rgb(124, 124, 124);
}


.footer
{
float:left;
margin-top:20px;
bottom:0;
width:100%;
text-align:center;
padding-bottom:25px;
}


.footer p
{
font-family:fira sans, sans-serif;
font-weight:400;
color:rgb(58, 58, 58);
}












/*....... BACKGROUND COLORS ........*/

.white_background
{
background-color:rgb(255, 255, 255);
}


.black_background
{
background-color:rgb(45, 45, 45);
}


.grey_background
{
background-color:rgb(244, 244, 244);
}