body {
    background: #f5f4eb;
    }

nav {
    z-index: 100;
    }

.wrap {
    margin-top: 50px;
    }

h2 {
    text-transform: uppercase;
    font-family: tenez, serif!important;
    font-weight: 400;
    font-style: normal;
    font-size: 500%;
    letter-spacing: 0;
    color: #14269f;
    text-align: center;
    }

h4 {
    text-align: center;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 200;
    font-size: 80%;
    margin: 0 0 20px 0;
    }

#subsections {
    margin: 0 auto;
    margin-top: 25px;
    text-align: center;
    padding: 20px 0;
    background: #f9f8f2;
	}

#subsections .wrap {
    margin-top: 0;
    }

#subsections .wrap p {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #14269f;
    font-weight: 600;
    font-size: 80%;
    margin-right: 20px;
    }

#subsections .wrap p span:after {
    content: ':';
    }

#subsections input[type='radio'] {
    visibility: hidden;
    /*display: none;*/
    position: absolute;
    z-index: 0;
    }

#subsections input[type='radio']:after {
    /*visibility: hidden;
    display: none;*/
    width: 15px;
    height: 15px;
    border-radius: 15px;
    top: -2px;
    left: -1px;
    position: relative;
    background-color: #f7cac9;
    content: '';
    display: inline-block;
    visibility: hidden;
    border: none;
    }

#subsections input[type='radio']:checked:after {
    width: 15px;
    height: 15px;
    border-radius: 15px;
    top: -2px;
    left: -1px;
    position: relative;
    background-color: #f7cac9;
    content: '';
    display: inline-block;
    visibility: visible;
    }

#subsections label {
    cursor: pointer;
	font-weight: 300;
    padding: 0 2px 2px 2px;
    margin-right: 40px;
    font-size: 95%;
    position: relative;
    color: #14269f;
    }

#subsections label.nomarg {
	margin-right: 0;
    }

#subsections input:checked + label{
    }

/*RESPONSIVE MENU*/
div.resp-menu {
    display: none;
    }

.sec-center {
    position: relative;
    max-width: 100%;
    text-align: center;
    z-index: 9;
    }

.dropdown[type="checkbox"]:checked,  .dropdown[type="checkbox"]:not(:checked){
    position: absolute;
    left: -9999px;
    opacity: 0;
    pointer-events: none;
    }

.for-dropdown span {
    margin-left: 15px;
    }

.dropdown:checked + label,
.dropdown:not(:checked) + label{
    position: relative;
    line-height: 2;
    height: 50px;
    transition: all 200ms linear;
    border-radius: 4px;
    width: 100%;
    letter-spacing: 1px;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    -ms-flex-pack: center;
    text-align: center;
    border: none;
    background: #f9f8f2;
    cursor: pointer;
    color: #14269f;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #14269f;
    font-weight: 600;
    font-size: 80%;
    }

.dropdown:not(:checked) + label:before{
    position: fixed;
    top: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 100%;
    z-index: -1;
    cursor: auto;
    pointer-events: none;
    }

.dropdown:checked + label:before{
    pointer-events: auto;
    }

.dropdown:not(:checked) + label .uil {
    font-size: 24px;
    margin-left: 10px;
    transition: transform 200ms linear;
    }

.dropdown:checked + label span {
    transform: rotate(180deg);
    transition: transform 200ms linear;
    }

.section-dropdown {
    position: absolute;
    background-color: #f9f8f2;
    border-top: 1px solid #14269f;
    top: 50px;
    left: 0;
    width: 100%;
    display: block;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: all 200ms linear;
    box-shadow: rgba(33, 35, 38, 0.19) 0px 10px 10px -10px;
    }

.dropdown:checked ~ .section-dropdown{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    }

.section-dropdown:before {
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    content: '';
    display: block;
    z-index: 1;
    }

.section-dropdown input[type='radio'] {
    visibility: hidden;
    display: none;
    }

.section-dropdown input[type='radio']:checked:after > label {
    width: 15px;
    height: 15px;
    border-radius: 15px;
    top: -2px;
    left: -1px;
    position: relative;
    background-color: #f7cac9;
    content: '';
    display: inline-block;
    visibility: visible;
    background: #f7cac9;
    }

.section-dropdown label {
    cursor: pointer;
	font-weight: 300;
    position: relative;
    color: #14269f;
    display: block;
    display: block;
    padding: 15px 0;
    border-bottom: 1px solid rgba(51, 49, 50, 0.08);
    }

.section-dropdown label:last-of-type {
    border-bottom: 0;
    }

.section-dropdown input:checked + label {
    background-color: #f7cac9;
    }
/*RESPONSIVE MENU*/



div.portfoliocontent {
    background: #fff;
    padding-top: 100px;
    }

div.portfoliocontent div.wrap table {
    width: 100%;
    }

div.portfoliocontent div.wrap table td {
    padding-bottom: 50px;
    width: 50%;
    vertical-align: top;
    text-align: center;
    }

div.portfoliocontent div.wrap table td:nth-child(2) {
    padding-top: 50px;
    }

.portfoliocontent .wrap table td div a div {
    max-width: 80%;
    margin: 0 auto;
    }

.portfoliocontent .wrap table td div img {
    width: 100%;
    height: auto;
    margin: 0 auto;
    }

div.photography-div div.himg {
    margin: 0 auto;
    text-align: center;
    width: 90%;
    }

div.photography-div div.himg img{
    width: 100%;
    height: auto;
    }

div.photography-div div.f-div {
    max-width: 80%;
    margin: 0 auto;
    }

div.project04, div.project01 {
    margin-bottom: 50px;
    }

div.project01, div.project04, div.project06, div.project02a, div.project12, div.project14 {
    text-align: center;
    }

div.project01 img, div.project04 img, div.project06 img, div.project02a img, div.project12 img, div.project14 img{
    width: 90%;
    height: auto;
    margin: 0 auto;
    }

div.project01:hover, div.project02:hover, div.project02a:hover, div.project03:hover, div.project04:hover, div.project05:hover, div.project06:hover, div.project07:hover, div.project08:hover, div.project09:hover, div.project10:hover, div.project12:hover { 
	opacity: 1;
	transform: scale(0.9); 
	transition: 0.3s;
    cursor: url('../images/mouse02.cur'), pointer !important;
	}

div.project05:hover, div.project06:hover, div.project07:hover, div.project08:hover, div.project10:hover, div.project11:hover, div.project13:hover, div.project14:hover { 
	opacity: 1;
	transform: scale(0.9); 
	transition: 0.3s;
    cursor: url('../images/mouse03.cur'), pointer !important;
	}

div.uxdesign-div {
    padding-top: 10px;
    }

div.packaging-div, div.promotion-div, div.uxdesign-div, div.branding-div, div.photography-div, div.webdesign-div {
    display: none;
    }

div.webdesign-div {
    color: #333132;
    text-align: center;
    padding: 150px 0;
    }

div.branding-div h3 {
    padding-top: 100px;
    text-align: center;
    }
/** END PROJECTS **/


/*RESPONSIVE WEBSITE*/
@media screen and (max-width: 1210px){
    footer table td {
        display: block;
        width: 90%;
        margin: 0 auto;
        padding-left: 0px;
        padding-bottom: 50px;
        text-align: center!important;
        padding-right: 0;
        }
    
    footer table td:nth-child(3) {
        padding-left: 0;
        padding-right: 0;
        }
}

@media screen and (max-width: 1100px){
    div.portfoliocontent table tr td {
        display: block;
        margin: 0 auto;
        }
}

@media screen and (max-width: 1050px){
    table#main-tb td{
        display: block;
        }

    table#main-tb td:nth-child(2){
        margin-left: 10px;
        padding: 35px 0 0 35px!important;
        }
}
@media screen and (max-width: 790px){
     table#main-tb td:nth-child(2){
        margin-left: 0;
        padding-left: 30px!important; 
        }
    
    #subsections {
        display: none;
        }
    
    div.resp-menu {
        display: block;
        margin-top: 20px;
        }
}
@media screen and (max-width: 725px){
    table#main-tb h2 {
        width: 100%;
        }
    
    div.portfoliocontent div.wrap table td {
        width: 80%;
        margin-bottom: 20px;
        }
    
    div.portfoliocontent div.wrap table td:nth-child(2) {
        padding-top: 0;
        }
    
    h2 {
        font-size: 450%;
        }
}