/*************************

  Coppermine Photo Gallery

  ************************

  Theme base designed by BeingCreative.us

  Twitter: http://twitter.com/beingcreativeus

  Sellfy: https://sellfy.com/BeingCreative

  

*************************************************************/

/* Colors used (USE "FIND AND REPLACE" TO CHANGE THEM EASILY")

/* ---------------------------------------------------------*/

/* MINT #ff4f66 */

/* KIWI #ff8192 */

/* TEAL GREEN #e0223b */

/* DARK GREEN #224645 */

/* LIGHT GREY #ececec */

/* GREY #6b6e76 */



html{

    height: 100%;

}

body {

    height: 100%;

	background-color: #ececec;

	background-position: top center;

	background-repeat: no-repeat;

	background-attachment: fixed;

	font-family: "Roboto", Verdana, Geneva, Arial, sans-serif;

	font-size: 15px;

	color: #6b6e76;

	margin: 0px;

    -webkit-text-size-adjust: 100%;

    position: relative;

}



/*THEME STYLE*/

.top-bar{

    background: #fff;

}

.top-bar-wrap{

    width: 100%;

    max-width: 1230px;

    padding: 15px;

    margin: 0px auto;

    box-sizing: border-box;

}

.top-bar-wrap:after{

    clear: both;

    content: "";

    display: block;

}

.website-name{

    display: inline-block;

    text-transform: uppercase;

    color: #e0223b;

	font-family: "Oswald";

    font-size: 120%;

    line-height: 40px;

    z-index: 9;

    position: relative;

}

.website-name strong{

    color: #ff8192;

    border-bottom: 3px solid #ff8192;

    line-height: 40px;

    display: inline-block;

    vertical-align: top;

}

.website-name strong:first-child{

    color: #e0223b;

    border-bottom: 3px solid #e0223b;

}

.website-name i{

    padding-left: 6px;

    padding-right: 6px;

    line-height: 40px;

    color: #ff4f66;

    border-bottom: 3px solid #ff4f66;

    vertical-align: top;

}

.sys-menu{

    float: right;

    z-index: 9;

    position: relative;

}

.sys-menu a{

    color: #6b6e76;

    border-bottom: 3px solid transparent;

    line-height: 40px;

    display: inline-block;

    vertical-align: top;

	font-family: "Oswald";

    font-size: 95%;

    margin: 0px 0px 0px 5px;

    text-transform: uppercase;

}

.sys-menu a:hover{

    color: #ff4f66;

    border-bottom: 3px solid #ff4f66;

}

.top-bar-bottom{

    display: inline-block;

    border-top: 1px solid #ececec;

    margin-top: -2px;

    z-index: 1;

    line-height: 40px;

    position: relative;

    width: 100%;

}

.social-links{

    position: absolute;

    right: 0;

    top: 0;

}

.social-links a{

    display: inline-block;

    line-height: 30px;

    width: 30px;

    text-align: center;

    border-radius: 100px;

    color: #6b6e76;

    background: #ececec;

    margin: 5px 0px 5px 5px;

}

.social-links a i{

    line-height: 30px;

}

.social-links a:hover{

    color: #fff;

    background: #ff4f66;

}

.header{

    background-image: url(images/header.png);

    height: 600px;

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

}

.gallery-wrap{

    width: 100%;

    max-width: 1230px;

    padding: 0px 15px;

    margin: 0px auto;

    box-sizing: border-box;

}

.maintable{

    background: #fff;

    padding: 10px 15px;

    margin-bottom: 15px;

    -webkit-box-shadow: 8px 8px 5px 0px rgba(0,0,0,0.03);

    -moz-box-shadow: 8px 8px 5px 0px rgba(0,0,0,0.03);

    box-shadow: 8px 8px 5px 0px rgba(0,0,0,0.03);

}

.thumbs-table{

    width: 100%;

    display: flex;

}

.thumbnails{

    display: table-cell;

    text-align: center;

    flex: 1;

    width: 0;

    box-sizing: border-box;

}

.gallery-menu{

    width: 100%;

    margin: -30px 0px 15px 0px;

    padding: 15px;

    box-sizing: border-box;

    text-align: center;

    background: #fff;

    -webkit-box-shadow: 8px 8px 5px 0px rgba(0,0,0,0.03);

    -moz-box-shadow: 8px 8px 5px 0px rgba(0,0,0,0.03);

    box-shadow: 8px 8px 5px 0px rgba(0,0,0,0.03);

}

.gallery-menu a{

    display: inline-block;

    background: rgba(255,255,255,0);

    padding: 5px 8px;

    text-transform: uppercase;

    color: #6b6e76;

	font-family: "Oswald";

    font-size: 95%;

}

.gallery-menu a:hover{

    background: #ff4f66;

    color: #fff;

}

.gallery-menu a i, .sys-menu a i{

    margin-right: 5px;

}



.ads{

    width: 100%;

    margin: 0px 0px 15px 0px;

    padding: 15px;

    box-sizing: border-box;

    text-align: center;

    background: #fff;

    -webkit-box-shadow: 8px 8px 5px 0px rgba(0,0,0,0.03);

    -moz-box-shadow: 8px 8px 5px 0px rgba(0,0,0,0.03);

    box-shadow: 8px 8px 5px 0px rgba(0,0,0,0.03);

    text-align: center;

}

.footer-wrap{

    background: #fff;

}

.footer-content{

    width: 100%;

    max-width: 1230px;

    margin: 0px auto;

    box-sizing: border-box;

    text-align: justify;

    padding: 15px;

    line-height: 170%;

}

.footer-box{

    width: 100%;

    margin: 15px 0px 15px 0px;

    padding: 0px 0px 15px 0px;

    box-sizing: border-box;

    text-align: justify;

    text-transform: uppercase;

    color: #6b6e76;

	font-family: "Oswald";

    border-bottom: 2px solid #ececec;

}



/*ADMIN MENU*/

.admin_menu_wrapper{

    position: fixed;

    z-index: 99;

    background: #fff;

	font-family: "Oswald";

    height: 100%;

    padding: 15px;

    box-sizing: border-box;

    width: 300px;

    left: -300px;

    -webkit-box-shadow: 0px 0px 0px rgba(0,0,0,0.0);

    -moz-box-shadow: 0px 0px 0px rgba(0,0,0,0.0);

    box-shadow: 0px 0px 0px rgba(0,0,0,0.0);

	-moz-transition-property: all;-moz-transition-duration: 0.5s;

	-webkit-transition-property: all;-webkit-transition-duration: 0.5s;

	-o-transition-property: all;-o-transition-duration: 0.5s;

	transition-property: all;transition-duration: 0.5s;

}

.open.admin_menu_wrapper{

    left: 0px;

    -webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.2);

    -moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.2);

    box-shadow: 0px 0px 15px rgba(0,0,0,0.2);

}

.open-btn{

    position: absolute;

    left: 10px;

    top: 10px;

    cursor: pointer;

    z-index: 99;

	font-family: "Oswald";

    padding: 15px;

    background: #ff4f66;

    color: #fff;

}

.open-btn i{

    margin-right: 8px;

}

.hide{

    display: none;

}

.admin-title{

    font-size: 130%;

    padding-bottom: 10px;

    border-bottom: 1px solid #ececec;

    margin-bottom: 7px;

}

.close-btn{

    float: right;

    cursor: pointer;

}

.admin_menu_wrapper a{

    display: block;

    padding: 8px 5px;

    color: #6b6e76;

    border-bottom: 1px solid #ececec;

}

.admin_menu_wrapper a:hover{

    color: #ff4f66;

    border-bottom: 1px solid #ff4f66;

}

.admin_menu_wrapper a i{

    margin-right: 6px;

    width: 20px;

    text-align: center;

}



/*GALLERY STYLE*/

h1{

	font-weight: normal;

	font-size: 150%;

	font-family: "Oswald";

	text-decoration: none;

	line-height: 120%;

	color: #718EA5;

	margin: 2px;

}

h2 {

	font-family: "Oswald";

	background-image: url(images/box_left_icon.gif);

	background-repeat: no-repeat;

	background-position: left;

	font-size: 130%;

	margin: 0px;

}

h3 {

	font-weight: normal;

	font-family: "Oswald";

	margin: 2px;

}

p {

	font-family: Arial, Helvetica, sans-serif;

	margin: 2px 0px;

}

pre.filepath {

	margin: 0px;

	padding: 0px;

}

ul, ol {

	margin-left: 5px;

	margin-top:0px;

	margin-bottom:0px;

	padding: 0px;

}

li {

	margin-left: 10px;

	margin-top: 4px;

	margin-bottom: 4px;

	padding: 0px;

	list-style-position: outside;

}

ul li {

	list-style-type: none;

}

.textinput {

	font-family: "Roboto", Verdana, Geneva, Arial, sans-serif;

	border: 1px solid #D1D7DC;

	padding-right: 3px;

	padding-left: 3px;

}

.listbox {

	font-family: "Roboto", Verdana, Geneva, Arial, sans-serif;

	border: 1px solid #D1D7DC;

	vertical-align: middle;

}

.button, .buttonlist ul li a {

	font-family: "Roboto", Verdana, Geneva, Arial, sans-serif;

    border: 1px solid #CCD7E0;

    background: #ececec;

    background-position: bottom;

    cursor: pointer;

    padding: 8px;

    margin-right: 2px;

    color: #224645;

    display: inline-block;

}

.radio {

	font-family: "Roboto", Verdana, Geneva, Arial, sans-serif;

	vertical-align: middle;

}

.checkbox {

	font-family: "Roboto", Verdana, Geneva, Arial, sans-serif;

	vertical-align: middle;

}

a {

	color: #ff4f66;

	text-decoration: none;

	-moz-transition-property: all;-moz-transition-duration: 0.5s;

	-webkit-transition-property: all;-webkit-transition-duration: 0.5s;

	-o-transition-property: all;-o-transition-duration: 0.5s;

	transition-property: all;transition-duration: 0.5s;

}

a:hover {

	color: #e0223b;

	text-decoration: none;

}

.bblink a {

	color: #224645;

	text-decoration: none;

}

.bblink a:hover {

	color: #224645;

	text-decoration: underline;

}

.tableh1, .tableh2 {

	font-family: "Oswald";

    text-transform: uppercase;

    color: #ff4f66;

    padding: 15px;

    font-size: 150%;

	border-bottom: 2px solid #ff4f66;

}

.stats-td {

	font-family: "Oswald";

    text-transform: uppercase;

    color: #6b6e76;

    font-style: normal;

    padding: 15px;

    font-size: 120%;

    background: #f8f8f8;

    border: 1px solid #ececec;

}

.tablef {

	padding-top: 10px;

	padding-right: 10px;

	padding-bottom: 10px;

	padding-left: 10px;

}

.catrow {

	padding: 5px;

	border-bottom: 1px solid #ececec;

	-moz-transition-property: all;-moz-transition-duration: 0.5s;

	-webkit-transition-property: all;-webkit-transition-duration: 0.5s;

	-o-transition-property: all;-o-transition-duration: 0.5s;

	transition-property: all;transition-duration: 0.5s;

}

.catrow:hover {

    background: #f8f8f8;

}

.album_stat {

	font-size: 85%;

	margin: 5px 0px;

}

.thumb_filename {

	font-size: 80%;

	display: block;

}

.thumb_title, .thumb_caption {

    display: block;

    padding: 5px;

    border-bottom: 1px solid #ececec;

}

.thumbnails span:last-child{

    border-bottom: 0;

}

.thumb_title_title {

    font-family: "Oswald";

    font-size: 120%;

    color: #434040;

}

.user_thumb_infobox {

	margin-top: 1px;

	margin-bottom: 1px;

}

.user_thumb_infobox th {

	font-weight: bold;

	margin-top: 1px;

	margin-bottom: 1px;

	text-align: center;

}

.user_thumb_infobox td {

	font-size: 85%;

	margin-top: 1px;

	margin-bottom: 1px;

	text-align: center;

}

.user_thumb_infobox a {

	text-decoration: none;

	color: #000000;

}

.user_thumb_infobox a:hover {

	color: #000000;

	text-decoration: underline;

}

.sortorder_cell {

	background-color: #ff4f66;

	color: #e0223b;

	padding-top: 0px;

	padding-bottom: 0px;

	padding-left: 0px;

	margin: 0px;

}

.sortorder_options {

	font-family: Verdana, Arial, Helvetica, sans-serif;

	background-color: #ff4f66;

	color: #e0223b;

	padding: 0px;

	margin: 0px;

	font-weight: normal;

	font-size: 80%;

	white-space: nowrap;

}

.album-admin{

    text-align: right;

}

.album-admin a {

	display: inline-block;

	margin-left: 10px;

	color: #e0223b;

}

.navmenu {

	font-family: "Roboto", Verdana, Geneva, Arial, sans-serif;

	color: #6b6e76;

	font-weight: bold;

	background:  #ececec ;

	border-style: none;

    text-align: center;

}

.navmenu a {

	display: block;

    font-size: 150%;

    padding: 8px;

	text-decoration: none;

	color: #6b6e76;

}

.navmenu a:hover {

	background: #F2F5F7 ;

	text-decoration: none;

	color: #000000;

}

#pic_info_button img{

    display: none;

}

#pic_info_button a:before{

    display: block;

    font-style: normal;

    font-variant: normal;

    text-rendering: auto;

    -webkit-font-smoothing: antialiased;

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

    content: "\f15c";

}

#slideshow_button img{

    display: none;

}

#slideshow_button a:before{

    display: inline-block;

    font-style: normal;

    font-variant: normal;

    text-rendering: auto;

    -webkit-font-smoothing: antialiased;

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

    content: "\f144";

}

.prev_strip img{

    display: none;

}

.prev_strip a:before{

    display: inline-block;

    font-style: normal;

    font-variant: normal;

    text-rendering: auto;

    -webkit-font-smoothing: antialiased;

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

    content: "\f104";

    font-size: 200%;

}

.next_strip img{

    display: none;

}

.next_strip a:before{

    display: inline-block;

    font-style: normal;

    font-variant: normal;

    text-rendering: auto;

    -webkit-font-smoothing: antialiased;

    font-family: "Font Awesome 5 Free";

    font-weight: 900;

    content: "\f105";

    font-size: 200%;

}

.icon {

	vertical-align:middle;

	margin-right:1px;

}

.comment_date{

	color: #5F5F5F;

	font-size: 90%;

	vertical-align: middle;

}

.image {

    width: auto;

    max-width: 90%;

    height: auto;

    background: #f8f8f8;

	padding: 5px;

    border: 1px solid #ececec;

    border-radius: 3px;

	opacity: 0.8;

	-moz-transition-property: all;-moz-transition-duration: 0.2s;

	-webkit-transition-property: all;-webkit-transition-duration: 0.2s;

	-o-transition-property: all;-o-transition-duration: 0.2s;

	transition-property: all;transition-duration: 0.2s;

}

.image:hover {

	opacity: 1;

}

.display_media {

	padding-top: 3px;

	padding-right: 10px;

	padding-bottom: 3px;

	padding-left: 10px;

}

.thumbnails {

	padding: 5px;

}

.alb-list-thumbnails {

    min-width: 120px;

}

.footer {

	display: none !important;

}

.breadcrumb{

    font-style: normal;

}

.breadcrumb i:first-child{

    display: none;

}

.statlink {

	color: #6b6e76;

}

.statlink a {

	text-decoration: none;

	color: #6b6e76;

}

.statlink a:hover {

	color: #ff4f66;

	text-decoration: none;

}

.alblink {

	font-weight:bold;

}

.alblink a {

	text-decoration: none;

	color: #ff4f66;

}

.alblink a:hover {

	color: #e0223b;

}

.catlink {

	display: block;

	font-family: "Oswald";

	margin-bottom: 2px;

	text-transform: uppercase;

	letter-spacing: -0.5px;

}

.catlink a {

	text-decoration: none;

	color: #434040;

}

.catlink a:hover {

	color: #ff4f66;

	text-decoration: none;

}

.topmenu {

	font-family: "Roboto", Verdana, Geneva, Arial, sans-serif;

	line-height: 130%;

	font-size: 1.100%

}

.topmenu a {

	color: #224645;

	text-decoration: none;

}

.topmenu a:hover  {

	color: #224645;

	text-decoration: underline;

}

.img_caption_table {

	border: none;

	width: 100%;

	margin: 0px;

}

.img_caption_table th {

	background: #D1D7DC ;

	color: #000000;

	padding-top: 4px;

	padding-right: 10px;

	padding-bottom: 4px;

	padding-left: 10px;

	border-top: 1px solid #e0223b;

}

.img_caption_table td {

	padding-top: 6px;

	padding-right: 10px;

	padding-bottom: 6px;

	padding-left: 10px;

	border-top: 1px solid #e0223b;

	white-space: normal;

}

.debug_text {

	border: #BDBEBD;

	background-color: #EFEFEF;

	width: 100%;

	margin: 0px;

}

.clickable_option {

	cursor: default;

}

.listbox_lang {

	color: #000666;

	border: 1px solid #D1D7DC;

	font-size: 80%;

	font-family: Arial, Helvetica, sans-serif;

	vertical-align: middle;

}

.pic_title {

	color: #000666;

	font-weight:bold;

	text-align: center;

	padding-top:0px;

	padding-bottom:0px;

	margin-top:0px;

	margin-bottom:0px;

}

.pic_caption {

	color: #000666;

	font-weight:normal;

	text-align: center;

	padding-top:0px;

	padding-bottom:0px;

	margin-top:0px;

	margin-bottom:0px;

	background-image:none;

}

.important {

	/* background-image: url(images/important.gif); */

	color: red;

	font-weight: bold;

	padding-left:1px;

	padding-right:1px;

	padding-top:3px;

	padding-bottom:3px;

}

#cpgChooseLanguageWrapper {

	float:left;

}

#cpgChooseThemeWrapper {

	float:left;

}

.tile-background{

    background-color: #ff4f66;

}

.filmstrip_background {

	background-color: #ececec;

}

.prev_strip {

	text-align: left;

}

.next_strip{

	text-align: right;

}

/** Swfupload css **/

div.fieldset {

	border:  2px solid #0E72A4;

	margin: 10px 0;

	padding: 20px 10px;

}

div.fieldset span.legend {

	position: relative;

	padding: 3px;

	top: -30px;

	background-color:  #ececec;

	color: #FFF;

	font-weight: bold;

}

div.flash {

	width: 375px;

	margin: 10px 5px;

	border-color: #CCD7E0;

}

input[disabled]{ border: 1px solid #ccc } /* FF 2 Fix */



.progressWrapper {

	width: 357px;

	overflow: hidden;

}

.progressContainer {

	margin: 5px;

	padding: 4px;

	border: solid 1px #E8E8E8;

	background-color: #F7F7F7;

	overflow: hidden;

}

/* Message */

.message {

	margin: 1em 0;

	padding: 10px 20px;

	border: solid 1px #FFDD99;

	background-color: #FFFFCC;

	overflow: hidden;

}

/* Error */

.red {

	border: solid 1px #B50000;

	background-color: #FFEBEB;

}

/* Current */

.green {

	border: solid 1px #DDF0DD;

	background-color: #EBFFEB;

}

/* Complete */

.blue {

	border: solid 1px #CEE2F2;

	background-color: #F0F5FF;

}

.progressName {

	font-weight: 700;

	color: #555;

	width: 323px;

	height: 14px;

	text-align: left;

	white-space: nowrap;

	overflow: hidden;

}

.progressBarInProgress,

.progressBarComplete,

.progressBarError {

	font-size: 0;

	width: 0%;

	height: 2px;

	background-color: blue;

	margin-top: 2px;

}

.progressBarComplete {

	width: 100%;

	background-color: green;

	visibility: hidden;

}

.progressBarError {

	width: 100%;

	background-color: red;

	visibility: hidden;

}

.progressBarStatus {

	margin-top: 2px;

	width: 337px;

	font-family: Arial;

	text-align: left;

	white-space: nowrap;

	color: #555;

}

a.progressCancel {

	font-size: 0;

	display: block;

	height: 14px;

	width: 14px;

	background-image: url(../../images/cancelbutton.gif);

	background-repeat: no-repeat;

	background-position: -14px 0px;

	float: right;

}

a.progressCancel:hover {

	background-position: 0px 0px;

}

.swfupload {

	vertical-align: top;

}

/**styles for photo manager*/

table#pic_sort tr td {

	padding: 4px;

	border-bottom: 1px solid #ccc;

}

/** styles for album manager and photo album*/

table#album_sort tr td {

	padding: 3px;

	border-bottom: 1px solid #ccc;

}

table#album_sort tr td span.editAlbum {

	margin-left: 100px;

	line-height: 100%;

	text-decoration: underline;

	cursor: pointer;

	display: none;

	color: #FF0000;

}

.cpg_message_info, .cpg_message_success, .cpg_message_warning, .cpg_message_error, .cpg_message_validation {

	padding:15px 10px 15px 50px;

	background-repeat: no-repeat;

	background-position: 10px center;

    margin: 15px 0px;

    -webkit-box-shadow: 8px 8px 5px 0px rgba(0,0,0,0.03);

    -moz-box-shadow: 8px 8px 5px 0px rgba(0,0,0,0.03);

    box-shadow: 8px 8px 5px 0px rgba(0,0,0,0.03);

}

.cpg_message_info {

	color: #00529B;

	background-color: #BDE5F8;

	background-image: url('../../images/message/info.png');

}

.cpg_message_success {

	color: #4F8A10;

	background-color: #f5ffe5;

	background-image: url('../../images/message/ok.png');

}

.cpg_message_warning {

	color: #9F6000;

	background-color: #FEEFB3;

	background-image: url('../../images/message/warning.png');

}

.cpg_message_error {

	color: #D8000C;

	background-color: #FFBABA;

	background-image: url('../../images/message/stop.png');

}

.cpg_message_validation {

	color: #D63301;

	background-color: #FFCCBA;

	background-image: url('../../images/message/error.png');

}

.cpg_summary {

	border: 1px solid;

	margin: 10px 0px;

	padding:5px 10px 5px 10px;

	color: #FF2B9C;

	background-color: #FFDEEF;

	text-align:right;

	float:right;

	width:400px;

}

#GB_window {

	border: 5px solid #CCD7E0;

}

.external {

	background: transparent url('../../images/link.gif') 100% 50% no-repeat;

	padding-right: 10px;

}

.detail_head_collapsed, .detail_head_expanded {

	color: #6b6e76;

    display: block;

    padding: 15px;

    border-bottom: 2px solid #6b6e76;

	font-family: "Oswald";

    font-size: 120%;

    text-transform: uppercase;

    cursor: pointer;

}

.detail_head_expanded {

	color: #ff4f66;

    border-bottom: 2px solid #ff4f66;

}



/*SCROLL + SELECTION */



::-webkit-scrollbar{

width: 6px;

}

::-webkit-scrollbar-track {

background-color: #ececec;

}

::-webkit-scrollbar-thumb {

background-color: #224645;

}

::-webkit-scrollbar-thumb:hover {

background-color: #ff4f66;

}

::-webkit-scrollbar-button{

height: 0px !important;

}

::Selection {

color: #224645;

background-color: #7dbf43;

}



/* MEDIA QUERIES */

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

.gallery-menu{

    margin: 15px 0px;

}

}

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

    .header{

        height: 500px;

    }

    .website-name{

        display: block;

        text-transform: uppercase;

        color: #e0223b;

        font-family: "Oswald";

        font-size: 200%;

        line-height: 100%;

        text-align: center;

        padding: 15px 0px;

        border-bottom: 1px solid #ececec;

    }

    .sys-menu{

        float: none;

        display: block;

        text-align: center;

        z-index: 9;

        position: relative;

    }

}

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

    .thumbnails:nth-child(1n+7){

        display: none;

    }

}

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

    .thumbnails:nth-child(1n+6){

        display: none;

    }

    .slogan{

        display: none;

    } 

    .social-links{

        position: static;

        text-align: center;

    }

    .website-name strong{

        color: #ff8192;

        border-bottom: 0px;

        line-height: 100%;

        display: inline-block;

        vertical-align: top;

    }

    .website-name strong:first-child{

        color: #e0223b;

        border-bottom: 0px;

    }

    .website-name i{

        padding-left: 6px;

        padding-right: 6px;

        line-height: 100%;

        color: #ff4f66;

        border-bottom: 0px;

        vertical-align: top;

    }

    .admin_menu_wrapper{

        width: 100%;

        left: -100%;

    }

    .open-btn{

        position: fixed;

        left: 0px;

        top: 0px;

        width: 100%;

        cursor: pointer;

        z-index: 99;

        display: block;

        padding: 15px;

        font-size: 150%;

        background: #ff4f66;

        color: #fff;

    }

    .sys-menu{

        float: none;

        display: block;

        text-align: center;

        z-index: 9;

        position: relative;

    }

    .sys-menu a{

        color: #6b6e76;

        border-bottom: 0px;

        line-height: 100%;

        display: inline-block;

        vertical-align: top;

        font-family: "Oswald";

        font-size: 120%;

        margin: 0px 3px;

        padding: 10px 0px;

        text-transform: uppercase;

    }

    .sys-menu a:hover{

        color: #ff4f66;

        border-bottom: 0px;

    }

}

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

    .thumbs-table{

        width: 100%;

        display: flex;

        flex-wrap: wrap;

    }

    .thumbnails:nth-child(6){

        display: table-cell;

    }

    .thumbnails{

        flex: 0 0 33.3333%;

    }

    .thumbnails:nth-child(1n+7){

        display: none;

    }

}

@media only screen and (min-device-width: 100px) and (max-device-width: 1024px){

    body{

        font-size: 30px;

    }

    .thumbs-table{

        width: 100%;

        display: flex;

        flex-wrap: wrap;

    }

    .thumbnails:nth-child(6){

        display: table-cell;

    }

    .thumbnails{

        flex: 0 0 33.3333%;

    }

    .thumbnails:nth-child(1n+7){

        display: table-cell;

    }

    .thumbnails .image {

        width: 90%;

        height: auto;

        padding: 10px;

        border: 2px solid #ececec;

        opacity: 1;

    }

    .website-name{

        display: block;

        text-transform: uppercase;

        color: #e0223b;

        font-family: "Oswald";

        font-size: 200%;

        line-height: 100%;

        text-align: center;

        padding: 15px 0px;

        border-bottom: 1px solid #ececec;

    }

    .website-name strong{

        color: #ff8192;

        border-bottom: 0px;

        line-height: 100%;

        display: inline-block;

        vertical-align: top;

    }

    .website-name strong:first-child{

        color: #e0223b;

        border-bottom: 0px;

    }

    .website-name i{

        padding-left: 6px;

        padding-right: 6px;

        line-height: 100%;

        color: #ff4f66;

        border-bottom: 0px;

        vertical-align: top;

    }

    .sys-menu{

        float: none;

        display: block;

        text-align: center;

        z-index: 9;

        position: relative;

    }

    .sys-menu a{

        color: #6b6e76;

        border-bottom: 0px;

        line-height: 100%;

        display: inline-block;

        vertical-align: top;

        font-family: "Oswald";

        font-size: 150%;

        margin: 0px 3px;

        padding: 10px 0px;

        text-transform: uppercase;

    }

    .sys-menu a:hover{

        color: #ff4f66;

        border-bottom: 0px;

    }

    .top-bar-bottom{

        display: block;

        border-top: 1px solid #ececec;

        margin-top: 0px;

        z-index: 1;

        line-height: 40px;

        position: relative;

        width: 100%;

        text-align: center;

    }

    .slogan{

        display: none;

    }

    .social-links{

        position: static;

        display: block;

        text-align: center;

    }

    .social-links a{

        display: inline-block;

        font-size: 150%;

        line-height: 70px;

        width: 70px;

        text-align: center;

        border-radius: 100px;

        color: #6b6e76;

        background: #ececec;

        margin: 5px 0px 5px 5px;

    }

    .social-links a i{

        line-height: 70px;

    }

    .social-links a:hover{

        color: #fff;

        background: #ff4f66;

    }

    .admin_menu_wrapper{

        width: 100%;

        left: -100%;

    }

    .open-btn{

        position: fixed;

        left: 0px;

        top: 0px;

        width: 100%;

        cursor: pointer;

        z-index: 99;

        display: block;

        padding: 15px;

        font-size: 150%;

        background: #ff4f66;

        color: #fff;

        box-sizing: border-box;

    }

    .admin_menu_wrapper a{

        font-size: 130%;

    }

    .admin_menu_wrapper a i{

        margin-right: 10px;

        width: 50px;

    }

    input, button, textarea, select{

        font-size: 120%;

        margin: 10px;

        max-width: 400px;

        box-sizing: border-box;

    }

    button img{

        display: none;

    }

}



#dropArea { border: 1px dashed #777; width: 100%; padding: 1em 0; text-align: center; border-radius: 5px }

#dropArea.hover { background-color: #DFD; border: 1px solid #999; box-shadow: inset 2px 2px 3px #999 }

#totprogress { width: 100%; height: 8px; margin-bottom: 3px; border: 1px solid #BBB; border-radius: 3px; background: #1EAEFB url("progbar.png") -1px 0 no-repeat }

#fprogress { color: #111; }

#fprogress p { display: block; padding: 2px 5px; margin: 2px 0; border: 1px solid #BBB; border-radius: 3px; font-size: 0.9em; background: #AAD7FD url("progbar.png") -1px 0 no-repeat; }

#fprogress p.chunked { background-color: #D9D2FF; }

#fprogress p.indeterm { background: #efefef url("indeterm.gif") repeat-x top; }

#fprogress p.success { background: #0C0 none 0 0 no-repeat; }

#fprogress p.failure { background: #F99 none 0 0 no-repeat; }

img.abortX { float: right; margin-top: -2px; cursor: pointer; }

img.infog { margin-bottom: -2px; cursor: pointer; }

div.acti {display: none; margin-left: 5px; vertical-align: text-bottom; }

div.acti img { cursor: pointer; }

.textinput { width: 100%; box-sizing: border-box; }