* {
margin: 0px;
padding: 0px;
}

.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}

.pace-inactive {
display: none;
}

.pace .pace-progress {
background: #FF7520;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 2px;
}

body, html {
background-color: #0F0F0F;
background-image: url("../images/grid/grid.pn");
background-position: top;
background-repeat: no-repeat;
height: 100%;
scroll-behavior: smooth;
}

.container-black {
background-color: #0F0F0F;
margin: 0 auto 0 auto;
overflow: hidden;
}

.container-white {
background-color: #FAFAFA;
margin: 0 auto 0 auto;
overflow: hidden;
}

.container-inner {
width: 1290px;
margin: 120px auto 130px auto;
overflow: hidden;
}

.container-inner-no-top-padding {
width: 1290px;
margin: 0px auto 130px auto;
overflow: hidden;
}


/*--------------------------------------------------
Fonts
---------------------------------------------------*/	

p {
font-family: 'Inter-Regular', Helvetica, Arial, 'sans-serif';
color: #7F898C;
font-size: 18px;
line-height: 34px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-synthesis: none !important;
}

p a:link, p a:visited {
color: #FAFAFA;
text-decoration: underline;
}

p a:hover, p a:active {
color: #FF7520;
text-decoration: none;
}

h1 {
font-family: 'Inter-Medium', Helvetica, Arial, 'sans-serif';
color: #FAFAFA;
font-size: 50px;
line-height: 70px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-synthesis: none !important;
}

h2 {
font-family: 'Inter-Regular', Helvetica, Arial, 'sans-serif';
color: #FAFAFA;
font-size: 30px;
line-height: 42px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-synthesis: none !important;
}

h3 {
font-family: 'Inter-SemiBold', Helvetica, Arial, 'sans-serif';
color: #FAFAFA;
font-size: 10px;
line-height: 22px;
letter-spacing: 2px;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-synthesis: none !important;
}

.black {
color: #0F0F0F;
}

.white {
color: #FAFAFA;
}

/*--------------------------------------------------
Header
---------------------------------------------------*/	

#header {
background-color: #0F0F0F;
position: fixed;
top: 0px;
padding: 20px 0 20px 0;
width: 100%;
display: block;
transition: top 0.3s;
z-index: 99;
}

.header-inner {
padding: 0 32px 0 32px;
margin: 0 auto 0 auto;
overflow: hidden;
}

.header-title {
width: 25%;
float: left;
}

.header-title h3 {
line-height: 32px;
}

.header-title h3 a:link, .header-title h3 a:visited, .header-title h3 a:hover, .header-title h3 a:active {
color: #FAFAFA;
text-decoration: none;
}

.header-menu {
width: 50%;
float: left;
text-align: center;
}

.header-menu ul {
font-family: 'Inter-SemiBold', Helvetica, Arial, 'sans-serif';
font-size: 10px;
line-height: 32px;
letter-spacing: 2px;
margin: 0 20px 0 20px;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}

.header-menu ul a:link, .header-menu ul a:visited {
color: #FAFAFA;
text-decoration: none;
}

.header-menu ul a:hover, .header-menu ul a:active {
color: #FF7520;
text-decoration: none;
}

.header-time {
width: 25%;
float: left;
text-align: right;
}

#clock {
font-family: 'Inter-SemiBold', Helvetica, Arial, 'sans-serif';
color: #FAFAFA;
font-size: 10px;
line-height: 32px;
letter-spacing: 2px;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}

.active {
color: #FF7520;
}

.clapat-menubtn {
float: right;
display: none;
cursor:pointer;
margin: 8px 0 0 0;
}

.clapat-menubtn .btn_menu_line {
height: 2px;
width: 20px;
margin: 0 0 5px 0;
background-color: #f1f1ef;
display: block;
}

.clapat-menubtn:hover .btn_menu_line {
background-color: #FF7520 !important;
}

.clapat-overlay-menu {
position: fixed;
top: 0;
left: 0;
z-index: 100;
display: none;
width: 100%;
height: 100%;
}

.clapat-overlay-menu .clapat-menu-container {
position: relative;
z-index: 102;
width: 100%;
height: 100%;
color: #0F0F0F;
text-align: center;
display: inline-block;
}

.clapat-overlay-menu .clapat-menu-container .categories li {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 500ms cubic-bezier(0.455,0.03,0,1);
-moz-transition: opacity 500ms cubic-bezier(0.455,0.03,0,1);
-o-transition: opacity 500ms cubic-bezier(0.455,0.03,0,1);
transition: opacity 500ms cubic-bezier(0.455,0.03,0,1);
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
list-style: none;
font-size: 50px;
margin: 0 0 10px;
padding: 0;
}

.clapat-overlay-menu .clapat-menu-container .categories li a {
display: block;
color: #FAFAFA;
font-family: 'Inter-SemiBold', Helvetica, Arial, 'sans-serif';
line-height: 50px;
font-size: 30px;
letter-spacing: 4px;
font-weight: normal;
text-decoration: none;
}

.clapat-overlay-menu .clapat-menu-container .categories li a:hover, .clapat-overlay-menu .clapat-menu-container .categories li a.is-active, .clapat-overlay-menu .clapat-menu-container .categories li a.active {
color:#FF7520;
}

.clapat-overlay-menu .clapat-menubg {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
-webkit-transition: opacity 700ms cubic-bezier(0.39,0.575,0.565,1);
-moz-transition: opacity 700ms cubic-bezier(0.39,0.575,0.565,1);
-o-transition: opacity 700ms cubic-bezier(0.39,0.575,0.565,1);
transition: opacity 700ms cubic-bezier(0.39,0.575,0.565,1);
-webkit-transition-delay: 400ms;
-moz-transition-delay: 400ms;
-o-transition-delay: 400ms;
transition-delay: 400ms;
position: absolute;
top: 0;
left: 0;
z-index: 101;
width: 100%;
height: 100%;
}

.clapat-overlay-menu.is-active .clapat-menubg {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
-webkit-transition: opacity 500ms cubic-bezier(0.455,0.03,0,1);
-moz-transition: opacity 500ms cubic-bezier(0.455,0.03,0,1);
-o-transition: opacity 500ms cubic-bezier(0.455,0.03,0,1);
transition: opacity 500ms cubic-bezier(0.455,0.03,0,1);
}

.clapat-menubg-overlay {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 1);
}

.clapat-menuclosebtn {	
top: 50px;
right: 50px;
height: 30px;
width: 30px;
position: absolute;
cursor:pointer !important;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity:0;
-webkit-transition: opacity 400ms cubic-bezier(0.39,0.575,0.565,1);
-moz-transition: opacity 400ms cubic-bezier(0.39,0.575,0.565,1);
-o-transition: opacity 400ms cubic-bezier(0.39,0.575,0.565,1);
transition: opacity 400ms cubic-bezier(0.39,0.575,0.565,1);
}

.clapat-menuclosebtn.is-active {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 100;
-webkit-transition: opacity 1ms cubic-bezier(0.39,0.575,0.565,1);
-moz-transition: opacity 700ms cubic-bezier(0.39,0.575,0.565,1);
-o-transition: opacity 700ms cubic-bezier(0.39,0.575,0.565,1);
transition: opacity 700ms cubic-bezier(0.39,0.575,0.565,1);
-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-o-transition-delay: 1s;
transition-delay: 1s;
}

.closebtn-rotate {
height: 30px;
width: 30px;
position: absolute;	
transition: transform 0.4s ease 0s;
-moz-transition: transform 0.4s ease 0s;
-webkit-transition: transform 0.4s ease 0s;
-o-transition: transform 0.4s ease 0s;
}

.closebtn-rotate:hover {
-ms-transform: rotate(180deg); 
-webkit-transform: rotate(180deg); 
-o-transition: rotate(180deg);
transform: rotate(180deg);
}

.clapat-menuclosebtn .btn_menu_line {
-ms-transform: rotate(-45deg); 
-webkit-transform: rotate(-45deg); 
transform: rotate(-45deg);
background-color: #ffffff;
display: block;
height: 3px;
width: 30px;
position: absolute;
margin-top: 13px;
}

.clapat-menuclosebtn .btn_menu_line:first-child {
-ms-transform: rotate(45deg); 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg);
}

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

.outer {
display:table;
width:100%;
height:100%;
}

.inner {
display:table-cell;
vertical-align:middle;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}


/*--------------------------------------------------
Home
---------------------------------------------------*/	

.selected-projects-title {
margin: 0 0 15px 0;
}

.selected-projects {
width: 740px;
margin: 0 0 10px 0;
}

.thumbnail {
width: 630px;
height: 630px;
margin: 50px 30px 50px 0;
float: left;
overflow: hidden;
}

.thumbnail-last {
width: 630px;
height: 630px;
margin: 50px 0 0 0;
float: left;
overflow: hidden;
}

.thumbnail img, .thumbnail-last img {
width: 100%;
}

.thumbnail p, .thumbnail-last p {
padding: 20px 0 0 0;
overflow: visible;
position: absolute;
}

.thumbnail img, .thumbnail-last img {
transition: transform .5s ease;
}

.thumbnail img:hover, .thumbnail-last img:hover {
transform: scale(1.1);
opacity: 0.5;
}


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

.intro {
width: 739px;
margin: 100px auto 0 auto;
border-left: solid;
border-left-width: 1px;
border-left-color: #3B3B3B;
padding-left: 109px;
}

.intro h2 {
margin: 0 0 50px 0;
}

.intro-inner {
width: 630px;
}

.full-image img {
width: 100%;
display: block;
-webkit-user-drag: none; 
-khtml-user-drag: none; 
-moz-user-drag: none; 
-o-user-drag: none; 
user-drag: none;
}

.brand-experience-title {
text-align: center;
margin: 0 0 20px 0;
}

.brand-experience-info {
width: 410px;
text-align: center;
margin: 0 auto 60px auto;
}

.logo-wrapper {
height: 321px;
width: 321px;
margin: -1px -1px 0 0;
display: flex;
flex-direction:column;
justify-content:center;
text-align:center;
border: solid;
border-width: 1px;
border-color: #DADADA;
float: left;
}

.logo-wrapper img {
max-height:100px;
max-width:100%;
}

.margin-bottom {
margin-bottom: 60px;
}

.service h2 {
color: #0F0F0F;
padding: 0 0 10px 0;
}


/*--------------------------------------------------
Projects
---------------------------------------------------*/	

.cover-blackcell {
background-image: url("../images/cover/blackcell.jpg");
background-color: #000000;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.cover-finalfour {
background-image: url("../images/cover/finalfour.jpg");
background-color: #000000;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.cover-kingscup {
background-image: url("../images/cover/kingscup.jpg");
background-color: #000000;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.cover-big3 {
background-image: url("../images/cover/big3.jpg");
background-color: #000000;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.cover-amazonfresh {
background-image: url("../images/cover/amazonfresh.jpg");
background-color: #000000;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.cover-blackops {
background-image: url("../images/cover/blackops.jpg");
background-color: #000000;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.cover-christmas {
background-image: url("../images/cover/christmas.jpg");
background-color: #000000;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.cover-illustration {
background-image: url("../images/cover/illustration.jpg");
background-color: #000000;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

.project {
width: 1070px;
margin: 140px auto 150px auto;
overflow: hidden;
}

.project-left-content {
width: 630px;
padding: 0 139px 0 0;
border-right: solid;
border-right-width: 1px;
border-right-color: #3B3B3B;
float: left;
}

.project-right-content {
width: 190px;
padding: 0 0 0 110px;
float: left;
}

.project-number h3 {
margin: 0 0 20px 0;
}

.project-title {
width: 410px;
margin: 0 0 50px 0;
}

.project-title h3 {
margin: 0 0 20px 0;
}

.project-overview h3 {
margin: 0 0 20px 0;
}

.project-menu {
margin: 0 0 210px 0;
}

.project-menu a:link, .project-menu a:visited {
color: #FAFAFA;
text-decoration: none;
}

.project-menu a:hover, .project-menu a:active {
color: #FF7520;
text-decoration: none;
}

.project-service {
margin: 0 0 50px 0;
}

.project-service h3 {
margin: 0 0 20px 0;
}

.project-client h3 {
margin: 0 0 20px 0;
}

.project-gallery {
width: 100%;
height: auto;
margin: 0 auto 0 auto;
overflow: hidden;
}

.project-gallery img {
width: 100%;
display: block;
padding: 0 0 30px 0;
}

.project-gallery img:last-child {
padding: 0 0 0 0;
}

.half {
width: 630px;
height: auto;
float: left;
margin: 0 30px 0 0;
}

.half-last {
width: 630px;
height: auto;
float: left;
margin: 0 0 0 0;
}

.half img {
width: 100%;
display: block;
}

.half-padding {
padding: 0 0 30px 0;
}

.half-padding-top {
padding: 0 0 0 0;
}

.description {
width: 410px;
padding: 0 0 50px 0;
}

.project-end-menu {
width: 1290px;
margin: 60px auto 0 auto;
overflow: hidden;
}

.project-end-menu-left {
width: 25%;
float: left;
}

.project-end-menu-left a:link, .project-end-menu-left a:visited {
color: #FAFAFA;
text-decoration: underline;
}

.project-end-menu-left a:hover, .project-end-menu-left a:active {
color: #FF7520;
text-decoration: none;
}

.project-end-menu-center {
width: 50%;
float: left;
text-align: center;
}

.project-end-menu-center a:link, .project-end-menu-center a:visited {
color: #FAFAFA;
text-decoration: underline;
}

.project-end-menu-center a:hover, .project-end-menu-center a:active {
color: #FF7520;
text-decoration: none;
}

.project-end-menu-right {
width: 25%;
float: left;
text-align: right;
}

.project-end-menu-right a:link, .project-end-menu-right a:visited {
color: #FAFAFA;
text-decoration: underline;
}

.project-end-menu-right a:hover, .project-end-menu-right a:active {
color: #FF7520;
text-decoration: none;
}

.project-end-menu-black {
width: 1290px;
margin: 60px auto 0 auto;
overflow: hidden;
}

.project-end-menu-left-black {
width: 25%;
float: left;
}

.project-end-menu-left-black a:link, .project-end-menu-left-black a:visited {
color: #0F0F0F;
text-decoration: underline;
}

.project-end-menu-left-black a:hover, .project-end-menu-left-black a:active {
color: #FF7520;
text-decoration: none;
}

.project-end-menu-center-black {
width: 50%;
float: left;
text-align: center;
}

.project-end-menu-center-black a:link, .project-end-menu-center-black a:visited {
color: #0F0F0F;
text-decoration: underline;
}

.project-end-menu-center-black a:hover, .project-end-menu-center-black a:active {
color: #FF7520;
text-decoration: none;
}

.project-end-menu-right-black {
width: 25%;
float: left;
text-align: right;
}

.project-end-menu-right-black a:link, .project-end-menu-right-black a:visited {
color: #0F0F0F;
text-decoration: underline;
}

.project-end-menu-right-black a:hover, .project-end-menu-right-black a:active {
color: #FF7520;
text-decoration: none;
}


/*--------------------------------------------------
Footer
---------------------------------------------------*/	

.footer {
background-color: #FF7520;
margin: 0 auto 0 auto;
overflow: hidden;
}

.footer-inner {
width: 1290px;
margin: 120px auto 130px auto;
overflow: hidden;
}

.collaborate-title h3 {
color: #0F0F0F;
margin: 0 0 15px 0;
}

.email-drop {
width: 630px;
}

.email-drop h2 {
color: #0F0F0F;
}

.email-drop h2 a:link, .email-drop h2 a:visited {
color: #0F0F0F;
text-decoration: underline;
}

.email-drop h2 a:hover, .email-drop h2 a:active {
color: #FAFAFA;
text-decoration: none;
}

.social {
margin: 50px 0 0 0;
}

.fa {
margin: 0 70px 0 0;
color: #0F0F0F;
text-decoration: none;
}

.fa-behance:hover, .fa-instagram:hover, .fa-pinterest:hover {
color:#FAFAFA;
}

.footer-end {
width: 1290px;
float: left;
margin: 70px 0 0 0;
}

.copyright {
width: 25%;
float: left;
}

.copyright h3 {
color: #0F0F0F;
line-height: 32px;
}

.footer-menu {
width: 50%;
text-align: center;
float: left;
}

.footer-menu ul {
font-family: 'Inter-SemiBold', Helvetica, Arial, 'sans-serif';
font-size: 10px;
line-height: 32px;
letter-spacing: 2px;
margin: 0 20px 0 20px;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}

.footer-menu ul a:link, .footer-menu ul a:visited {
color: #0F0F0F;
text-decoration: none;
}

.footer-menu ul a:hover, .footer-menu ul a:active {
color: #FAFAFA;
text-decoration: none;
}

.top {
width: 25%;
float: left;
text-align: right;
}

.top h3 {
line-height: 32px;
}

.top h3 a:link, .top h3 a:visited {
color: #0F0F0F;
text-decoration: none;
}

.top h3 a:hover, .top h3 a:active {
color: #FAFAFA;
text-decoration: none;
}

ul {
font-family: 'Inter-SemiBold', Helvetica, Arial, 'sans-serif';
font-size: 12px;
line-height: 32px;
letter-spacing: 3px;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}

ul a:link, ul a:visited {
color: #0F0F0F;
text-decoration: none;
}

ul a:hover, ul a:active {
color: #FAFAFA;
text-decoration: none;
}


/*--------------------------------------------------
Media Queries
---------------------------------------------------*/	

@media only screen and (min-width: 960px) and (max-width: 1490px) {

.container-inner, .container-inner-no-top-padding, .footer-inner, .footer-end{
width: 870px;
}

.header-title {
width: 30%;
}

.header-menu {
width: 40%;
}

.header-time {
width: 30%;
}

.thumbnail {
width: 420px;
height: 420px;
margin: 50px 30px 50px 0;
float: left;
overflow: hidden;
}

.thumbnail-last {
width: 420px;
height: 420px;
margin: 50px 0 50px 0;
float: left;
overflow: hidden;
}

.intro {
width: 599px;
margin: 100px auto 0 auto;
border-left: solid;
border-left-width: 1px;
border-left-color: #3B3B3B;
padding-left: 89px;
}

.intro-inner {
width: 500px;
}

.logo-wrapper {
height: 288px;
width: 288px;
margin: -1px -1px 0 0;
display: flex;
flex-direction:column;
justify-content:center;
text-align:center;
border: solid;
border-width: 1px;
border-color: #DADADA;
float: left;
}

.project {
width: 870px;
margin: 140px auto 150px auto;
overflow: hidden;
}

.project-left-content {
width: 510px;
padding: 0 120px 0 0;
border-right: solid;
border-right-width: 1px;
border-right-color: #3B3B3B;
float: left;
}

.project-right-content {
width: 150px;
padding: 0 0 0 89px;
float: left;
}

.project-end-menu {
width: 870px;
margin: 60px auto 0 auto;
overflow: hidden;
}

.half {
width: 420px;
}

.half-last {
width: 420px;
margin: 0 0 0 0;
}

.project-end-menu-left, .project-end-menu-right {
width: 50%;
float: left;
}

.project-end-menu-center {
display: none;
}

}

@media only screen and (min-width: 768px) and (max-width: 959px) {

h1 {
font-size: 44px;
line-height: 64px;
}

.container-inner {
width: 640px;
margin: 90px auto 100px auto !important;
}

.selected-projects-info, .footer-inner, .email-drop, .footer-end{
width: 640px;
}

.selected-projects {
margin: 40px 0 0 0;
}


.thumbnail, .thumbnail-last {
width: 640px;
height: 640px;
margin: 50px 0 50px 0;
float: left;
overflow: hidden;
}

.header-title {
width: 40%;
}

.header-menu {
width: 60%;
text-align: right;
}

.header-menu ul {
margin: 0 0 0 40px;
}

.header-time {
display: none;
}

.intro {
width: 640px;
margin: 70px auto 0 auto;
border-left: none;
border-left-width: 0px;
border-left-color: #3B3B3B;
padding-left: 0px;
}

.intro-inner {
width: 640px;
}

.logo-wrapper {
height: 318px;
width: 318px;
margin: -1px -1px 0 0;
display: flex;
flex-direction:column;
justify-content:center;
text-align:center;
border: solid;
border-width: 1px;
border-color: #DADADA;
float: left;
}

.project {
width: 640px;
margin: 140px auto 150px auto;
overflow: hidden;
}

.project-left-content {
width: 640px;
padding: 0 0 0 0;
border-right: none;
border-right-width: 0px;
border-right-color: #3B3B3B;
float: left;
}

.project-right-content {
width: 640px;
padding: 60px 0 0 0;
float: left;
}

.project-menu {
display: none;
}

.project-end-menu {
width: 640px;
margin: 60px auto 0 auto;
overflow: hidden;
}

.half {
width: 640px;
}

.half-last {
width: 640px;
margin: 0 0 0 0;
}

.half-padding-top {
padding: 30px 0 0 0;
}

.project-end-menu-left {
width: 100%;
float: left;
text-align: center;
margin: 0 0 40px 0;
}

.project-end-menu-center {
display: none;
}

.project-end-menu-right {
width: 100%;
float: left;
text-align: center;
}

.copyright {
width: 40%;
}

.footer-menu {
width: 60%;
}

.footer-menu ul {
margin: 0 0 0 40px;
float: right;
display: inline-block;
position: relative;
}

.top {
display: none;
}

}


@media only screen and (min-width: 480px) and (max-width: 767px) {

h1 {
font-size: 44px;
line-height: 64px;
}

.container-inner, .container-inner-no-top-padding, .project, .footer-inner {
width: 420px;
margin: 80px auto 90px auto !important;
}

.project {
margin: 80px auto 90px auto !important;
overflow: hidden;
}

.selected-projects-info, .project, .project-title, .footer-inner, .email-drop, .footer-end{
width: 420px;
}

.header-title {
width: 60%;
}

.header-menu, .header-time {
display: none;
}

.clapat-menubtn {
display: inline;
}

.selected-projects {
margin: 40px 0 0 0;
}

.thumbnail, .thumbnail-last {
width: 420px;
height: 420px;
margin: 50px 0 50px 0;
float: left;
overflow: hidden;
}

.intro {
width: 420px;
margin: 50px auto 0 auto;
border-left: none;
border-left-width: 0px;
border-left-color: #3B3B3B;
padding-left: 0px;
}

.intro-inner {
width: 420px;
}

.logo-wrapper {
height: 208px;
width: 208px;
margin: -1px -1px 0 0;
display: flex;
flex-direction:column;
justify-content:center;
text-align:center;
border: solid;
border-width: 1px;
border-color: #DADADA;
float: left;
}

.project {
width: 420px;
margin: 140px auto 150px auto;
overflow: hidden;
}

.project-left-content {
width: 420px;
padding: 0 0 0 0;
border-right: none;
border-right-width: 0px;
border-right-color: #3B3B3B;
float: left;
}

.project-right-content {
width: 420px;
padding: 60px 0 0 0;
float: left;
}

.project-menu {
display: none;
}

.project-end-menu {
width: 420px;
margin: 60px auto 0 auto;
overflow: hidden;
}

.half {
width: 420px;
}

.half-last {
width: 420px;
margin: 0 0 0 0;
}

.half-padding-top {
padding: 30px 0 0 0;
}

.project-end-menu-left {
width: 100%;
float: left;
text-align: center;
margin: 0 0 40px 0;
}

.project-end-menu-center {
display: none;
}

.project-end-menu-right {
width: 100%;
float: left;
text-align: center;
}

.copyright {
width: 50%;
}

.footer-menu {
display: none;
}

.top {
width: 50%;
}

}

@media only screen and (max-width: 479px) {

h1 {
font-size: 40px;
line-height: 56px;
}

.container-inner, .project, .footer-inner {
width: 340px;
margin: 80px auto 90px auto !important;
}

.container-inner-no-top-padding {
width: 340px;
margin: 0px auto 90px auto !important;
}

.project {
margin: 80px auto 90px auto !important;
overflow: hidden;
}

.selected-projects-info, .brand-experience-info, .project, .project-title, .footer-inner, .email-drop, .footer-end{
width: 340px;
}

.header-title {
width: 60%;
}

.header-menu, .header-time {
display: none;
}

.clapat-menubtn {
display: inline;
}

.selected-projects {
margin: 40px 0 0 0;
}

.thumbnail, .thumbnail-last {
width: 340px;
height: 340px;
margin: 50px 0 50px 0;
float: left;
overflow: hidden;
}

.intro {
width: 340px;
margin: 50px auto 0 auto;
border-left: none;
border-left-width: 0px;
border-left-color: #3B3B3B;
padding-left: 0px;
}

.intro-inner {
width: 340px;
}

.logo-wrapper {
height: 338px;
width: 338px;
margin: -1px -1px 0 0;
display: flex;
flex-direction:column;
justify-content:center;
text-align:center;
border: solid;
border-width: 1px;
border-color: #DADADA;
float: left;
}

.project {
width: 340px;
margin: 140px auto 150px auto;
overflow: hidden;
}

.project-left-content {
width: 340px;
padding: 0 0 0 0;
border-right: none;
border-right-width: 0px;
border-right-color: #3B3B3B;
float: left;
}

.project-right-content {
width: 340px;
padding: 60px 0 0 0;
float: left;
}

.project-menu {
display: none;
}

.project-end-menu {
width: 340px;
margin: 60px auto 0 auto;
overflow: hidden;
}

.half {
width: 340px;
}

.half-last {
width: 340px;
margin: 0 0 0 0;
}

.half-padding-top {
padding: 30px 0 0 0;
}

.project-end-menu-left {
width: 100%;
float: left;
text-align: center;
margin: 0 0 40px 0;
}

.project-end-menu-center {
display: none;
}

.project-end-menu-right {
width: 100%;
float: left;
text-align: center;
}

.copyright {
width: 50%;
}

.footer-menu {
display: none;
}

.top {
width: 50%;
}

}