/* CSS Document */


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

/*#pageContainer img {visibility: hidden;}*/

a { transition: color .25s; }
li { transition: background-color .5s; }

body {
    /*	font-family: 'Roboto', sans-serif;*/
	/*font-family: "SourceSansPro Light", sans-serif;*/
    font-family: "SourceSansPro Light";
    background: #f4f5f6;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
	max-width: 1920px;
	margin: 0 auto;
}

#editArea {
    position: absolute;
    top: 50px;
    left: 50px;
    height: 600px;
    width: 900px;
    background: #ccc;
}

#debug {
    position: absolute;
    width: 450px;
    height: auto;
    right: 25px;
    top: 25px;
}

.hover { border: 2px solid red; }
progress { width: 100%; }

h1 {

}

h2 {

}

h3 {


}

/*
=====================================================================

LOGIN

=====================================================================
*/

#login {
    position: fixed;
    top: 2.5em;
    left: 50%;
    width: 24em;
    margin-left: -12em;
    background: #fff;
    box-shadow: #ddd 1px 1px 1px;
 	display: none;
    z-index: 1000;
}

#login form {
    margin: 1em auto;
    width: 50%;
}

#login button {

    padding: .5em 1em .5em 1em;
}

#login button:hover {    
    background-color: rgba(0,174,155,0.9);
    color: #f4f5f6;
}

#login input {
    background: #656565;
    margin-top: .3em;
    color: white;
    padding: .75em .5em;
}

#alert {
    margin: 0 1em 1em 1em;
    float: left;
    color: red;
}

#logUp {
    position: static;

	color: white;
    font-weight: bold;
    width: 40px;
    height: 40px;
    z-index: 1000;

}

#logUp:hover {
    color: red;
    cursor: pointer;
}


/*
=====================================================================

CAROUSEL

=====================================================================
*/

.projectsCarousel {
    width: 90%;
    margin: 0 auto;   
    background: white; 
    padding: .5em;
    position: relative;
    padding-top: 1.8em;
    margin-bottom: 2em;
}

.projectsCarousel h1 {
    position: absolute;
    top: -.8em; left: .6em;
    font-weight: 100;
    font-size: 1.7em;
    background: #ccc;
    padding: .2em .5em .2em .5em;
    color: #f4f5f6;
    display: inline-block;
}

.projectsCarousel > div {
    display: flex;
    flex-flow: row wrap;    
    align-content: space-around;
}

.projectsCarousel a {
    box-sizing: border-box;
    border: .5em transparent solid;
    flex: 1 1 15%;    
    position: relative;
    max-width: 800px;
    transform: scale(1);
    transition: all .3s ease-out;
}

.projectsCarousel a.featured {
    flex: 2 1 40%;
}

.projectsCarousel a > div {    
    height: 15em;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    
}

.projectsCarousel a:hover {
    transform: scale(1.04);
}

.projectsCarousel a span {
    padding: .5em;
    margin: .5em;
    color: white;
    position: absolute;
    bottom: 0;
}

@media screen and (max-width: 800px) {
    .projectsCarousel a {
        flex: 0 1 33%; 
        border: .3em solid transparent;
    }

    .projectsCarousel a.featured {
        flex: 0 1 66%;
        box-shadow: none;
    }

    .projectsCarousel a > div {
        height: 10em;
    }

    .projectsCarousel a > div span {
        font-size: .8em;
        padding: .2em;
        margin: .3em;
    }
}





/*@media screen and (max-width: 480px){
	.carousel[data-columns]::before {
		content: '3 .column.size-1of3';
	}
}

@media screen and (min-width: 481px) and (max-width: 768px) {
	.carousel[data-columns]::before {
		content: '4 .column.size-1of4';
	}
}
@media screen and (min-width: 769px) {
	.carousel[data-columns]::before {
		content: '5 .column.size-1of5';
	}
}

.carousel .column { display: inline-block; vertical-align: top; }
.carousel .size-1of1 { width: 100%; }
.carousel .size-1of2 { width: 50%; }
.carousel .size-1of3 { width: 33.333%; }
.carousel .size-1of4 { width: 25%; }
.carousel .size-1of5 { width: 20%; }

.carousel div {
    min-height: 3em;

    margin: .3em;
    position: relative;
}
.carousel div:first-of-type {
    margin-left:0;
}

.carousel div:last-of-type {
    margin-right: 0;
}

.carousel img {
    width: 100%;
	display: block;
}
*/
.carousel {
    width: 90%;
	/*max-width: 1280px;*/
    height: auto;
    background: white;
    margin: auto;
    margin-bottom: 2em;
    padding: 1em .75em 1em .75em;
    position: relative;
    padding-top: 1.8em;
}

.carousel div div{
	opacity: 0;
}

#tagFilter div div {
	opacity: 1;
}
.carousel div { overflow: hidden; }

.carousel a > div {
	position: absolute;
	top: .5em; right: .5em; bottom: .5em; left: .5em;
	overflow: hidden;
	background-position: center center;
	background-size: cover;
    background-repeat: no-repeat;
    transition: all .1s;
}

.carousel a > div:hover {
    top: .3em; right: .3em; bottom: .3em; left: .3em;
}

.carousel span {
    position: absolute;
    bottom: .5em; left: .5em;
   
    
    padding: .75em;
    background: rgba(0,0,0,1);
    color: white;
    font-size: .7em;
    
}

.carousel h1 {
    position: absolute;
    top: -.8em; left: .6em;
    font-weight: 100;
    font-size: 1.7em;
    background: #ccc;
    padding: .2em .5em .2em .5em;
    color: #f4f5f6;
    display: inline-block;
}

.carousel a {
	width: 20%;
	padding-bottom: 20%;
	position: relative;
    float: left;
}

#tagFilter.carousel a {
	width: 10%;
	padding-bottom: 10%;
}

#deposit  {  text-align: center; }

.caption-box {
    
    height: 5em;
    background: #efefef;
    vertical-align: bottom;
    position: absolute;
    bottom: 0;
    left: 0em; right: 0em;    
    overflow: visible;
}


/*
=====================================================================

TAG FILTER
=====================================================================
*/

@media screen and (max-width: 480px){
	.carousel a {
		width: 50%;
		padding-bottom: 40%;
	}
	#tagFilter.carousel a {
		width: 33.3333%;
		padding-bottom: 33.3333%;
	}
}

@media screen and (min-width: 481px) and (max-width: 960px) {
	.carousel a {
		width: 50%;
		padding-bottom: 30%;
	}
	#tagFilter.carousel a {
		width: 20%;
		padding-bottom: 20%;
	}
}
@media screen and (min-width: 960px) {
	.carousel a {
		width: 33.3333%;
		padding-bottom: 20%;
	}
	#tagFilter.carousel a {
		width: 12.5%;
		padding-bottom: 12.5%;
	}
}

#tagFilter {
    min-height: 15.5em;
}

#tagList {
    color: #414141;
    display: block;
    margin: auto;
    text-align: center;
    min-height: 1.5em;
}

#tagList li {
    padding: .2em .3em .2em .3em;
    display: inline-block;
    margin-left: .2em;
    cursor: pointer;
}

#tagList .selected, #tagList li:hover {
    background: #00ae9b;
    color: #f4f5f6;
    padding: .2em .3em .2em .3em;
}

#categoryList {
    text-align: center;
    padding: 1em 0 0 0 ;

}

#categoryList li {
    padding: .2em .5em .2em .5em;
    cursor: pointer;
    margin: .2em;
    display: inline-block;
    color: #f4f5f6;
}



#categoryList li.noBG {
    background-color: #ccc !important;
    color: #414141;
}


/*
=====================================================================

HEADER

=====================================================================
*/


header {
    padding: 1em;
    width: 90%;
    text-align: center;
    min-height: 3em;
    margin: auto;
	margin-bottom: 2em;
}

header #logo {
    width: 90px;
    height: auto;
}

header h1 { 
    font-weight: 100;
    font-size: 1.5em;
    color: #414141;
}

header h2 {
    font-size: 1em;
    color: grey;
    display: inline-block;
}

/*
=====================================================================

NAVIGATION

=====================================================================
*/

nav {
position: relative;
height: 4em;
left: 5%;
right: 5%;
width: 90%;
overflow: hidden;
}



nav #menu {
	margin: 1em 0 2em 0;
	position: relative;
}

nav #sub-menu {
	padding: 1.2em 0 1.2em 0;
	position: relative;
	top: 0; left: 0; right: 0;
}

nav #sub-menu span {
	display: inline-block;
	height: 1.5em;
	vertical-align: middle;
	margin-right: 1em;
}

nav #menu ul {
	list-style-type: none;
	margin: 0 0 1em 0;
	min-width: 10em;
	display: inline-block;
	vertical-align: top;
}

nav #menu ul li {
	font-size: .8em;
	margin: .25em 0 .25em 0;
}

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

nav #menu ul li {
		font-size: 1em;
	}
}

nav #menu ul span {
	font-size: 1.1em;
	color: #f2f3f4;
}

nav a {
    color: #414141;
	text-decoration: none;

}

nav a:visited { color: #414141; }

nav a:hover{
    color: #00AE9B ;
}

.colour-D61E37:hover { color: #D61E37 !important; }
.colour-00AE9B:hover { color: #00AE9B !important; }
.colour-511b1b:hover { color: #511b1b !important; }
.colour-E1D2A5:hover { color: #E1D2A5 !important; }
.colour-00d0dd:hover { color: #00d0dd !important; }
.colour-6e325f:hover { color: #6e325f !important; }


.hiddenMenu {
	margin-top: 0 !important;
}

.hiddenMenu ul {
	visibility: visible !important;
}

nav {
	background-image: url('../images/logo.png');
	background-repeat: no-repeat;
	background-position: 100% .45em ;
	background-size: 2.5em;
}

nav .menu-icon {
	width:  1.5em;
	height:  1.5em;
	background-image: url('../images/menu.png');
	background-size: contain;
	background-repeat: no-repeat;
	position: relative;

}
nav .menu-icon {
	cursor: pointer;

}

nav .menu-icon:hover {

}




/*
=====================================================================

ABOUT PAGE

=====================================================================
*/

#about-wrapper {
    width: 90%;
    margin: 0 auto;
}
#about-wrapper a {
	color: #00AE9B;
}
#about-wrapper a:hover {
	color: #D61E37;
}

#about-wrapper h1 {
    color: #D61E37;
}

#about {
    width: 45%;
    display: inline-block;
    vertical-align: top;
    margin: 0 1em 1em 0;
}

#about p {
    margin: 1em 0 1em 0;
}

#profile, #skills {
    margin: 0 0 1em 1em;
    vertical-align: top;
    width: 45%;
    display: inline-block;
    list-style-type: none;
}

#profile span {
    font-weight: 700;
    margin: 0 1em .5em 0;
    width: 5em;
    display: inline-block;
    color: #00AE9B;
}

#profile ul{
    list-style-type: none;
    margin-left: 0;
}

#profile ul li{
    margin: .5em 0 .5em 0;
}
#skills { margin-left: 0; color: #00AE9B;}

#skills ul {
    color: #414141;
    list-style-type: none;
    margin: .5em 0 .5em 0;
}

#skills ul li {

    font-weight: 700;
    margin-left: 1em;
}
#skills ul li ul li {

    font-weight: 100;

}

@media screen and (max-width: 750px){
	#about, #profile, #skills {
		width: 95%;
		margin: 1em auto;
	}
}

@media screen and (min-width: 751px) {
	#about, #profile, #skills {
		width: 45%;
	}
}

/*
=====================================================================

CONTACT PAGE

=====================================================================
*/
#contact-wrapper {
	width: 90%;
	margin: 2em auto;
}

#contact-form {
    width:95%;
    max-width: 750px;
    position:relative;
}

#contact-form h2 {
	font-size: 1em;
    margin-bottom:1em;
    font-weight:normal;
}
#contact-form input,
#contact-form select,
#contact-form textarea,
#contact-form label {
    font-size:1em;
    margin-bottom:0.5em;
}
#contact-form input,
#contact-form select,
#contact-form textarea {
    width:100%;
    margin-bottom:1em;
    padding:4px;
}
#contact-form input:focus,
#contact-form select:focus,
#contact-form textarea:focus {
    background-color: #414141;
    color: #f2f3f4;
}
#contact-form textarea {
    height:15em;
    resize: vertical;
}
#contact-form label {
    display:block;
}
#contact-form .required {
    font-weight:bold;
    color:#D61E37;
}
#contact-form #submit-button {
    width: 100px;
    background-color:#00AE9B;
    color:#FFF;
    border:none;
	float: right;
	margin-right: -8px;
    transition: background-color .5s;
}
#contact-form #submit-button:hover {
    background-color: #D61E37;
}
#contact-form #submit-button:active {
    position:relative;
    top:1px;
}
#contact-form #loading {
    width:2em;
    height:2em;
    background-image:url('../images/239.gif');
    display:block;
    position:absolute;
    right:130px;
    bottom:16px;
    display:none;
}
#errors {
    padding:1em;
    margin:2em 0px;
    display:block;
    width:96%;
    background:#D61E37;
    display:none;
    color: #f2f3f4;
}
#errors li {
    padding:2px;
    list-style:none;
}
#errors li:before {
    content: ' - ';
}
#errors #info {
    font-weight:bold;
}
#errors #info:before {
    content: '';
}
#success {
    color: #f2f3f4;
    padding:1em;
    margin:2em 0px;
    display:block;
    width:96%;
    background:#00AE9B;
    font-weight:bold;
    display:none;
}
#errors.visible, #success.visible {
    display:block;
}


#req-field-desc {
    font-style:italic;
}
/* Remove box shadow firefox, chrome and opera put around required fields. It looks rubbish. */
input:required, textarea:required {
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    -o-box-shadow:none;
    box-shadow:none;
}
/* Normalize placeholder styles */
/* chrome, safari */
::-webkit-input-placeholder {
    color:#CCC;
}
/* mozilla */
input:-moz-placeholder, textarea:-moz-placeholder {
    color:#CCC;
}
/* ie (faux placeholder) */
input.placeholder-text, textarea.placeholder-text  {
    color:#CCC;
}

/*
=====================================================================

404

=====================================================================
*/

#not-found {
	width: 95%;
	max-width: 960px;
	margin: 2em auto;
	background: white;
	padding: 2em;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	text-align: center;
}

#not-found h1 {
	font-weight: 700;
	color: #D61E37;
	margin-bottom: 1em;
}

#not-found h2 {
	color: #414141;
}

#not-found img {
	margin: 1em auto;
	width: 50%;
	max-width: 400px;
}