/*
  root element for the scrollable.
  when scrolling occurs this element stays still.
  */
.scrollable {
	/* required settings */
	position:relative;
	overflow:hidden;
}
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}
.items div {
	float:left;
}
.scrollable img {
	float:left;
	margin:0;
	/* background-color:#fff; */
	padding:0;
	border:0;
	border-radius:2px;
}
.scrollable .active {
	border:1px solid #000;
	position:relative;
	cursor:default;
}
.scrollable {
	float:left;
}

.swidth {width: 600px;}
.sheight {height: 400px;}

.browsetop {top: 170px; }

a {
	text-decoration: none;
    font-family: "Rubik", sans-serif;
    font-weight: 400;
    font-style: normal;
	line-height: 120%;
	color: #ffdfff;
	background: rgba(172,0,0,0.3);
    padding-top: 0.2em;
    padding-bottom: 0.2em;
}

a:hover {color: #ffdfff; background: rgba(172,0,0,0.5);}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	background:url(./img/bt_gallery.png) no-repeat;
	display:block;
	position: relative;
	width:44px;
	height:44px;
	float:left;
	margin:0;
	cursor:pointer;
	font-size:1px;
	transition: none;
}

/* right */
a.right { background-position: 0 -44px; right: -40px; float: right;}
a.right:hover { background-position:-44px -44px; }
a.right:active { background-position:-88px -44px; }

/* left */
a.left { left: -40px;}
a.left:hover  { background-position:-44px 0; }
a.left:active { background-position:-88px 0; }

/* disabled navigational button */
a.disabled {
    visibility:hidden !important;
}

/*  TEXT  ============================================================================= */
body {
	background: url(./img/back02.jpg) no-repeat center center fixed;
	background-size: cover;
    margin: 0;
}

.container {
	position: relative; 
	float: left; 
	width: 80%; 
	color:#ffdfff; 
	margin-left: 8%; margin-top: 0; margin-bottom: 0;
	padding: 10px; padding-top: 2px; padding-bottom: 2px;
    font-family: "Rubik", sans-serif;
    font-weight: 400;
    font-style: normal;
	text-align: left;
}

.columns {
	position: relative; width: 40%; 
}

.bgcol1 {background: rgba(172,0,0,0.4);}
.bgcol2 {background: rgba(172,0,0,0.5);}
.bgcol3 {background: rgba(0,0,0,0.1);}

.header1 {
	color: #ffdfff; 
    font-family: "Playfair Display", serif;
    font-weight: 400;
    font-style: normal;
  	padding: 0; margin: 0;
	line-height: 120%;
	text-shadow: none;

    font-size: 36px;
	letter-spacing: 1px;
	margin-top: 1%;
	margin-bottom: 1%;
}

.text {
	color: #ffdfff; 
    font-family: "Rubik", sans-serif;
    font-weight: 400;
    font-style: normal;
  	padding: 0; margin: 0;
	line-height: 120%;
	text-shadow: none;
}

.t1 {
	font-size: 36px;
	letter-spacing: 1px;
	margin-top: 1%;
	margin-bottom: 1%;
}

.t2 {
	font-size: 24px;
	letter-spacing: 1px;
	margin-top: 4px;
	margin-bottom: 4px;
	margin-left: 10%;
}

.t3 {
	font-size: 16px;
	letter-spacing: 1px;
	margin-top: 0;
	margin-bottom: 4px;
}


a.active {
	color : #cd76bc;
	transition: all 0.3s ease;
    font-family: "Rubik", sans-serif;
    font-weight: 400;
    font-style: normal;
	letter-spacing: 3px;
	text-shadow: 0px 2px 0px black;
}

.c1 { color: #fff1fc;}
.c2 { color: #444;}

@media screen and (max-width: 1440px) {
    .header1 {  font-size: 32px; letter-spacing: 1px; margin-top: 1%; margin-bottom: 1%; }
    .t1 {  font-size: 32px; letter-spacing: 1px; margin-top: 1%; margin-bottom: 1%; }
    .t2 {  font-size: 20px; letter-spacing: 1px; margin-top: 2px; margin-bottom: 4px; margin-left: 10%;}
    .t3 {  font-size: 14px; letter-spacing: 1px; margin-top: 0; margin-bottom: 4px; }
}

@media screen and (max-width: 1280px) {
    .header1 {  font-size: 28px; letter-spacing: 1px; margin-top: 1%; margin-bottom: 1%; }
    .t1 {  font-size: 28px; letter-spacing: 1px; margin-top: 1%; margin-bottom: 1%; }
    .t2 {  font-size: 18px; letter-spacing: 1px; margin-top: 2px; margin-bottom: 4px; margin-left: 10%;}
    .t3 {  font-size: 14px; letter-spacing: 1px; margin-top: 0; margin-bottom: 4px; }
}

@media screen and (max-width: 1024px) {
    .header1 {  font-size: 24px; letter-spacing: 1px; margin-top: 1%; margin-bottom: 1%; }
    .t1 {  font-size: 24px; letter-spacing: 1px; margin-top: 1%; margin-bottom: 1%; }
    .t2 {  font-size: 16px; letter-spacing: 1px; margin-top: 2px; margin-bottom: 2px; margin-left: 10%;}
    .t3 {  font-size: 14px; letter-spacing: 1px; margin-top: 0; margin-bottom: 3px; }
    .swidth {width: 450px;}
    .sheight {height: 300px;}
    .browsetop {top: 120px; }
    body { background: url(./img/back01.jpg) no-repeat center center fixed; background-size: cover;}
}

@media screen and (max-width: 1012px) {
    .header1 {  font-size: 16px; letter-spacing: 1px; margin-top: 1%; margin-bottom: 1%; }
    .t1 {  font-size: 17px; letter-spacing: 1px; margin-top: 1%; margin-bottom: 1%; }
    .t2 {  font-size: 15px; letter-spacing: 0px; margin-top: 2px; margin-bottom: 2px; margin-left: 10%;}
    .t3 {  font-size: 13px; letter-spacing: 0px; margin-top: 0; margin-bottom: 2px; }
    .swidth {width: 450px;}
    .sheight {height: 300px;}
    .browsetop {top: 120px; }
    body { background: url(./img/back01.jpg) no-repeat center center fixed; background-size: cover;}
}

@media screen and (max-width: 768px) {
    .header1 {  font-size: 16px; letter-spacing: 1px; margin-top: 1%; margin-bottom: 1%; }
    .t1 {  font-size: 17px; letter-spacing: 1px; margin-top: 1%; margin-bottom: 1%; }
    .t2 {  font-size: 15px; letter-spacing: 0px; margin-top: 2px; margin-bottom: 2px; margin-left: 5%;}
    .t3 {  font-size: 13px; letter-spacing: 0px; margin-top: 0; margin-bottom: 2px; }
    .of1 { visibility: hidden; font-size: 0px;}
    .swidth {width: 300px;}
    .sheight {height: 200px;}
    .browsetop {top: 70px; }
    body { background: url(./img/back01.jpg) no-repeat center center fixed; background-size: cover; -webkit-text-size-adjust: 100%;}
}

@media screen and (max-width: 640px) {
    .header1 {  font-size: 15px; letter-spacing: 1px; margin-top: 4px; margin-bottom: 4px; }
    .t1 {  font-size: 15px; letter-spacing: 1px; margin-top: 4px; margin-bottom: 4px; }
    .t2 {  font-size: 13px; letter-spacing: 0px; margin-top: 2px; margin-bottom: 2px; margin-left: 5%;}
    .t3 {  font-size: 12px; letter-spacing: 0px; margin-top: 0; margin-bottom: 2px; }
    .of1 { visibility: hidden; font-size: 0px;}
    .swidth {width: 300px;}
    .sheight {height: 200px;}
    .browsetop {top: 70px; }
    body { background: url(./img/back03.jpg) no-repeat center center fixed; background-size: cover; -webkit-text-size-adjust: 100%;}
}

@media screen and (max-width: 480px) {
    .header1 {  font-size: 14px; letter-spacing: 1px; margin-top: 2px; margin-bottom: 2px; }
    .t1 {  font-size: 14px; letter-spacing: 1px; margin-top: 2px; margin-bottom: 2px; }
    .t2 {  font-size: 13px; letter-spacing: 0px; margin-top: 2px; margin-bottom: 2px; margin-left: 2px;}
    .t3 {  font-size: 12px; letter-spacing: 0px; margin-top: 0; margin-bottom: 2px; }
    .of1 { visibility: hidden; font-size: 0px;}
    .swidth {width: 200px;}
    .sheight {height: 134px;}
    .browsetop {top: 42px; }
    .columns {position: relative; width: 100%; }
    body { background: url(./img/back03.jpg) no-repeat center center fixed; background-size: cover; -webkit-text-size-adjust: 100%;}
}