body, html { width: 100%; height: 100%; min-height: 100%; margin: 0; padding: 0; background-color: #000; color: #fff; font-family: 'Roboto', sans-serif; text-align: center; }

a { text-decoration: none; color: inherit; }

img { outline: none; border: none; }



.width-100 { width: 100%; }

.width { width: 100%; max-width: 700px; }



* { max-width: 100%; box-sizing: border-box; }



.mr-5 { margin-right: 5px; }

.mr-10 { margin-right: 10px; }

.mr-15 { margin-right: 15px; }

.mr-20 { margin-right: 20px; }



.mb-5 { margin-bottom: 5px; }

.mb-10 { margin-bottom: 10px; }

.mb-15 { margin-bottom: 15px; }

.mb-20 { margin-bottom: 20px; }



.mt-5 { margin-top: 5px; }

.mt-10 { margin-top: 10px; }

.mt-15 { margin-top: 15px; }

.mt-20 { margin-top: 20px; }



.floatl { float: left; }

.floatr { float: right; }

.clear { clear: both; }

.ta-l { text-align: left; }

.ta-r { text-align: right; }

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

.padding-0 { padding: 0px; }

.hidden { display: none !important; }



.notify { background-color: #7a7a7a; border: 1px solid #545454; color: #fff; border-radius: 3px; display: table; margin: auto; }

.notify div { display: table-cell; padding: 10px; box-sizing: border-box; }

.notify .icon { width: 45px; background-color: #545454; background-image: url(images/info.png); background-position: center; background-repeat: no-repeat; }

.notify .text { color: #fff; font-size: 15px; text-align: left; }

.notify .close { position: relative; width: 35px; }

.notify .close i { width: 16px; height: 16px; background-image: url(images/close.png); background-position: center; background-repeat: no-repeat; position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; margin: auto; }

.notify .close i:hover { cursor: pointer; }



.notify.error { background-color: #bd3838; border: 1px solid #911717; }

.notify.error .icon { background-color: #911717; }

.notify.error .icon { background-image: url(images/error.png); }



.notify.success { background-color: #3eb652; border: 1px solid #1d8b2f; }

.notify.success .icon { background-color: #1d8b2f; }

.notify.success .icon { background-image: url(images/success.png); }



h1, h2, h3 { font-weight: 200; font-family: 'Oswald', sans-serif; }



section { padding: 75px 0 50px 0; text-align: center; }

section .page-title { font-size: 60px; margin: 0; margin-bottom: 40px; display: block; text-align: center; }



.info-text { margin-bottom: 50px; }

.info-text .text-title { font-size: 60px; display: block; text-align: center; margin: 0; }

.info-text .text-tags { margin-top: 5px; display: block; font-size: 13px; text-transform: uppercase; color: #e3e3e3; }

.info-text .text-desc { display: block; width: 100%; max-width: 700px; color: #787878; font-weight: 200; font-family: 'Oswald', sans-serif; font-size: 20px; margin: 10px auto 0 auto; }



header { padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }

header nav { padding: 0 40px; }

header nav #logo { float: left; }

header nav #logo .info-mobile { display: none; }

header nav #logo img { display: inline-block; vertical-align: middle; }

header nav #logo .info { display: inline-block; vertical-align: middle; text-align: left; margin-left: 20px; }

header nav #logo .info h1 { color: #d8d8d8; font-weight: 200; font-family: 'Oswald', sans-serif; font-size: 25px; line-height: 40px; margin: 0; padding: 0; }

/*header nav #logo .info h1, header nav #logo .info h2 { margin: 0; font-weight: 200; font-family: 'Oswald', sans-serif; }

header nav #logo .info h1 { margin: 0; font-size: 20px; color: #fff; line-height: 20px; }

header nav #logo .info h2 { margin: 0; font-size: 15px; color: #999; }*/

header nav #menu { float: right; text-align: right; list-style: none; margin: 0; padding: 0; }

header nav #menu li { position: relative; display: inline-block; font-size: 13px; text-transform: uppercase; color: #e3e3e3; margin-left: 20px; line-height: 40px; }

header nav #menu li:hover { color: #fff; }

header nav #menu li a:after { display: block; position: absolute; left: 0; bottom: 0px; width: 0; height: 1px; background-color: #0096ff; content: ""; transition: width 0.2s; }

header nav #menu li a:hover:after { width: 100%; }



.admin-menu { text-align: center; list-style: none; margin: 0 0 30px 0; padding: 0; }

.admin-menu li { position: relative; display: inline-block; font-size: 13px; text-transform: uppercase; color: #e3e3e3; margin: 0 10px; line-height: 40px; }

.admin-menu li:hover { color: #fff; }

.admin-menu li a:after { display: block; position: absolute; left: 0; bottom: 0px; width: 0; height: 1px; background-color: #0096ff; content: ""; transition: width 0.2s; }

.admin-menu li a:hover:after { width: 100%; }



.form-wrapper { max-width: 700px; width: 100%; background-color: rgba(255,255,255,0.1); border-radius: 5px; padding: 20px; box-sizing: border-box; margin: auto; }


.form-wrapper .checkbox-wrapper { width: 100%; margin: 15px 0; }
.form-wrapper .checkbox-wrapper input { width: 20px; height: 20px; vertical-align: middle; }

.gallery article { display: flex; flex-direction: column; position: relative; margin: 4px 0; }

.gallery article img { display: block; width: 100%; -webkit-filter: grayscale(75%) contrast(120%);; filter: grayscale(75%) contrast(120%); transition: all ease-out 0.5s; }

.gallery article:hover img { -webkit-filter: grayscale(0%) contrast(100%); filter: grayscale(0%) contrast(100%); }



.viewGallery article { position: relative; margin: 4px 0; }

.viewGallery article img { display: block; width: 100%; }



/*.gallery article h2 { margin: 0; padding: 0; font-size: 40px; font-weight: 400; }

.gallery article .center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

.gallery article span { display: block; margin-top: 5px; text-transform: uppercase; font-size: 14px; }*/



.contact { font-weight: 200; font-family: 'Oswald', sans-serif; font-size: 19px; }

.contact ul { list-style: none; margin: 30px 0; padding: 0; }

.contact ul li { color: #787878; margin: 5px 0; }

.contact ul li.title { color: #fff; font-size: 23px; }

.contact ul li span, .contact ul li a { color: #fff; position: relative; }



.tutorials { text-align: left; margin: 0; padding: 0; margin-bottom: 50px; list-style: none; }
.tutorials li { width: 25%; display: inline-block; margin: 0; padding: 0px; box-sizing: border-box; vertical-align: top; }
.tutorials li div { width: 100%; padding-bottom: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; -webkit-filter: grayscale(75%) contrast(120%);; filter: grayscale(75%) contrast(120%); transition: all ease-out 0.5s; }
.tutorials li div.delete { position: relative; }
.tutorials li div.delete span { display: none; width: 100%; padding: 20px; position: absolute; bottom: 0; left: 0; background-color: rgba(0,150,255,0.5); text-align: center; box-sizing: border-box; }
.tutorials li div.delete:hover span { display: block; }
.tutorials li div.delete span:hover { background-color: rgba(0,150,255,0.7); }
.tutorials li:hover div { -webkit-filter: grayscale(0%) contrast(100%); filter: grayscale(0%) contrast(100%); cursor: pointer; }



.underline:after { display: block; position: absolute; left: 0; bottom: -3px; width: 0; height: 1px; background-color: #0096ff; content: ""; transition: width 0.2s; }

.underline:hover:after { width: 100%; }



form { margin: auto; text-align: center; display: inline-block; }

form label { display: block; font-family: 'Oswald', sans-serif; font-size: 21px; font-weight: 200; margin: 15px 0 5px 0; }



footer { height: 70px; line-height: 70px; padding: 0 40px; border-top: 1px solid rgba(255,255,255,0.1); font-family: 'Oswald', sans-serif; font-size: 17px; font-weight: 200; }

footer .inf { display: inline-block; position: relative; height: 55px; }

footer .inf:after { display: block; position: absolute; left: 0; bottom: 0px; width: 0; height: 1px; background-color: #0096ff; content: ""; transition: width 0.2s; }

footer .inf:hover:after { width: 100%; }



.inputtext { display: block; height: 40px; border-radius: 3px; border: none; outline: none; padding: 0 10px; width: 250px; text-align: center; font-family: 'Roboto', sans-serif; font-size: 19px; box-sizing: border-box; }

textarea { display: block; border-radius: 3px; border: none; outline: none; padding: 10px; text-align: left; font-family: 'Roboto', sans-serif; font-size: 17px; box-sizing: border-box; resize: none; } 



.inputtext:focus, textarea:focus { background-color: #e3e3e3; }



.width .inputtext, .width textarea { width: 100%; max-width: 100%; }



.choose { cursor: pointer; display: block; height: 40px; border-radius: 3px; border: none; outline: none; padding: 0 10px; width: 250px; text-align: center; font-family: 'Roboto', sans-serif; font-size: 17px; background-color: transparent; color: #fff; border: 1px solid #fff; box-sizing: border-box; transition: all ease-out 0.3s; }

.choose:focus { border-color: #0096ff; background-color: rgba(0,0,0,0.2); }

button { cursor: pointer; display: block; height: 40px; border-radius: 3px; border: none; outline: none; padding: 0 10px; width: 250px; text-align: center; font-family: 'Roboto', sans-serif; font-size: 17px; background-color: transparent; color: #fff; border: 1px solid #fff; box-sizing: border-box; transition: all ease-out 0.3s; }

button:hover, button:focus { border-color: #0096ff; background-color: rgba(0,0,0,0.2); }


/* #sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
#sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 4em; text-align: center; } */


@media all and (max-width: 1400px) {

	header { padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }

	header nav { padding: 0 10px; text-align: center; }

	header nav #logo { float: none; display: block; }

	header nav #menu { float: none; display: block; text-align: center; margin-top: 10px; }

}





@media all and (max-width: 1100px) {

	.tutorials li { width: calc(100% / 3); }

}





@media all and (max-width: 800px) {

	header { padding: 0px; }

	header nav { height: auto; position: relative; }

	header nav #logo { width: 100%; display: block; height: 60px; padding: 0px; background-image: url(images/menu.png); background-position: right 0px center; background-repeat: no-repeat; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,0.1); } 

	header nav #logo img { float: left; margin-top: 15px; }

	header nav #logo .info { display: none; }

	header nav #logo .info-mobile { text-align: left; display: inline-block; line-height: 14px; font-size: 14px; font-weight: 200; margin-top: 8px; font-family: 'Oswald', sans-serif; float: left; margin-left: 15px; }

	header nav #menu { position: absolute; top: 61px; right: 0px; width: 100%; overflow: hidden; max-height: 0; margin: 0; transition: all ease-in .2s; padding: 0 10px; box-sizing: border-box; background-color: #000; z-index: 5; } 

	header nav #menu li { display: block; height: 35px; line-height: 35px; text-align: right; padding: 0; } 

	header nav #menu.open { max-height: 400px; } 



	.tutorials li { width: 50%; }

}



@media all and (max-width: 600px) {

	section .page-title { font-size: 40px; margin-bottom: 30px; }

	footer { height: auto; line-height: normal; padding: 10px; box-sizing: border-box; }

	footer .floatl, footer .floatr { float: none; display: block; text-align: center; line-height: 18px; font-size: 15px; }

	footer .inf { height: auto; }

}





@media all and (max-width: 500px) {

	.tutorials li { width: 100%; }

}



@media all and (max-width: 350px) {

	header nav #logo { height: 60px; }

	header nav #logo img { height: 28px; margin-top: 16px; }

	header nav #logo .info-mobile { line-height: 14px; font-size: 14px; margin-top: 8px; margin-left: 10px; }

}



@media all and (max-width: 290px) {

	header nav #logo .info-mobile { font-size: 13px; margin-left: 5px; }

}