body {
        text-align: center;
        background-color: #D3D3D3;
        font-family: futura, helvetica, arial;
        margin: 0px;
}


p {
        color: white;
}

*.logomob {
        visibility: hidden;
        display: hidden;
        vertical-align: top;
}

iframe {
        width:0px;
        height:0px;
        border: 0px;
}

ul#menu li.logomob {
        visibility: hidden;
        border: none;
        height: 0px;
        width: 0px;
        background-color: none;
        opacity: 1;
}

ul#menu {
        display: inline-block;
}


#navbar {
        position: fixed;
        margin-left: 8%;
        z-index: 3;
        text-align: left;
}



.logo{
        display: inline-block;
        background-color: black;
}



a {
        color: white;
        border: none;
}



.button {
        background: black;
        color: wite;
        border:none;
        display: inline-block;
        height: 30px;
        line-height: 30px;
        vertical-align: top;
        padding-left: 5px;
        padding-right: 5px;
        opacity: 1;
                -webkit-transition: opacity .35s ease-in-out, border .35s ease-in-out;
                -moz-transition: opacity .35s ease-in-out, border .35s ease-in-out;
                -ms-transition: opacity .35s ease-in-out, border .35s ease-in-out;
                -o-transition: opacity .35s ease-in-out, border .35s ease-in-out;
        transition: opacity .35s ease-in-out, border .35s ease-in-out;
}



.button:hover {
        opacity: 0.6;
                -webkit-transition: opacity .35s ease-in-out, border .35s ease-in-out;
                -moz-transition: opacity .35s ease-in-out, border .35s ease-in-out;
                -ms-transition: opacity .35s ease-in-out, border .35s ease-in-out;
                -o-transition: opacity .35s ease-in-out, border .35s ease-in-out;
        transition: opacity .35s ease-in-out, border .35s ease-in-out;
}

ul#submenu {
        display: block;
        position: fixed;
        right: 12%;
        left: auto;
        top: 0px;
        vertical-align: top;
}

ul#submenu li.button {
        border-color: white;
        border: solid;
        border-width: .5px;
}

.content {
        position: absolute;
        left: 10%;
        right: 10%;
        top: 0px;
        background-color: black;
        padding-top: 100px;
        width: 80%;
        margin: 0px;
}

.project {
         text-align: left;
         padding-left: 15px;
         padding-bottom: 40px;
         height: 100%;
}

.projside {
        display: inline-block;
        width: 15%;
}

.projpicker {
        width: 100%;
        opacity: 0.7;
        
}

.projpicker:hover {
        width: 100%;
        opacity: 1;    
}

.projimage {
        display: inline-block;
        position: relative;
        left: 10;
        width: 82%;
        padding-left: 1%;
}

#p1 {
        display: none;
}

#p1:target {
        display: inline-block;
}

#p2 {
        display: none;
}

#p2:target {
        display: inline-block;
}

#p3 {
        display: none;
}

#p3:target {
        display: inline-block;
}

#p4 {
        display: none;
}

#p4:target {
        display: inline-block;
}

.imgs {
        display: inline-block;
        width: 800px;
}

.blog {
        width: 100%;
}

.my_popup_open {
        width: 100%;
}

.cbp-fwslider {
	position: relative;
	margin: 0 0 10px;
	overflow: hidden;
	padding: 60px 0 25px;
}

.cbp-fwslider ul {
	margin: 0;
	padding: 0;
	white-space: nowrap;
	list-style-type: none;
}

.cbp-fwslider ul li {
	transform: translateZ(0);
	float: left;
	display: block;
	margin: 0;
	padding: 0;
}

.cbp-fwslider ul li > a,
.cbp-fwslider ul li > div {
	display: block;
	text-align: center;
	outline: none;
}

.cbp-fwslider ul li > a img {
	border: none;
	display: block;
	margin: 0 auto;
	max-width: 800px;
}

.cbp-fwslider nav span {
	position: absolute;
	top: 60%;
	width: 50px;
	height: 30px;
	background: black;
	color: #fff;
	font-size: 30px;
	text-align: center;
	margin-top: -50px;
	line-height: 30px;
	cursor: pointer;
	font-weight: normal;
        opacity: .3;
        border: solid;
        border-color: white;
        border-width: .5px;
}

.cbp-fwslider nav span:hover {
	background: black;
        opacity: .8;
}

.cbp-fwslider nav span.cbp-fwnext {
	right: 0px;
}

.cbp-fwslider nav span.cbp-fwprev {
	left: 0px;
}

.cbp-fwdots {
	position: absolute;
	bottom: 0px;
	white-space: nowrap;
	text-align: center;
	width: 100%;
}

.cbp-fwdots span {
	display: inline-block;
	width: 10px;
	height: 10px;
	background: #ddd;
	margin: 4px;
	border-radius: 50%;
	cursor: pointer;
}

.cbp-fwdots span:hover {
	background: #999;
}

.cbp-fwdots span.cbp-fwcurrent {
	background: black;
	box-shadow: 0 0 0 1px #ddd;
	transition: box-shadow 0.2s ease-in-out;
}

div#slidertitle p{
        position: relative;
        bottom: 20px;
        font-size: 13px;
}



.cbp-fwslider ul li > div.popup-content {
        display: none;
        position: absolute;
        width: 500px;
        height: 300px;
        top: 100px;
        margin-left: 20%;
        background-color: black;
        opacity: .8;
        color: white;
        z-index: 100;
}

.popup-close {
        text-align: right;
        display: inline-block;
        width: 500px;
        font-size: .8em;

}

.closebttn {
        display: inline-block;
        width:35px;
        height: 20px;
        border-color: grey;
        border: solid;
        border-width: .5px;
        margin-right: 5px;
}

.popuptext {
        font-size: .9em;
        text-align: left;
        padding-left: 100px;
}

@media screen and (max-width : 1040px) {
        
.imgs {
        width: 80%;
}

.content {
        position: absolute;
        left: 0px;
        right: auto;
        width: 100%;
        padding-top: 150px;
}

ul#submenu {
        display: block;
        vertical-align: top;
        position: relative;
        top: -20px;
        left: 0px;
}

#navbar {
        position: fixed;
        margin-left: 0px;
        z-index: 3;
        text-align: left;
}

.cbp-fwslider ul li > a img {
	max-width: 90%;
}

.cbp-fwslider {
	padding: 100px 0px 25px;
}
    

}