@charset "UTF-8";
/* CSS Document */

.anim {
padding-top: 100px;
}

video {
    box-shadow: 3px 3px 2px #AFA1A6;
	max-width: 80%;
}
.dj-intro {
	padding-top: 80px;
text-align: center;
	font-family: 'Raleway', sans-serif;
	padding-left: 70px;
	padding-right: 70px;
	background-color: #5C5055;
	padding-bottom: 30px;
	font-size: 18px;
	line-height: 33px;
}
.film-titles {

text-transform: uppercase;
}
.text2 {
	padding-top: 80px;
text-align: left;
	font-family: 'Raleway', sans-serif;
	padding-left: 20px;
	padding-right: 20px;
	color: #000000;
	padding-top: 30px;
	font-size: 18px;
	line-height: 33px;
	max-width: 800px;
margin: auto;
word-break: keep-all;
}

.text2head {
	padding-top: 80px;
text-align: left;
	font-family: 'Raleway', sans-serif;

	color: #000000;
	padding-top: 30px;
	font-size: 18px;
	line-height: 33px;
	font-weight: 600;
}
.exp {
    width: 90vw; 
    height: 40vw; /* 100/56.25 = 1.778 */
  
    max-height: 40vh;
    max-width: 90vw; /* 16/9 = 1.778 */
    margin: auto;
    position: relative;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */
	margin-bottom: 50px;
	box-shadow: 3px 3px 4px #AFA1A6;
}
.exparty {
    width: 90vw; 
    height: 50vw; /* 100/56.25 = 1.778 */
  
    max-height: 50vh;
    max-width: 90vw; /* 16/9 = 1.778 */
    margin: auto;
    position: relative;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */
	margin-bottom: 50px;
	box-shadow: 3px 3px 4px #AFA1A6;
}
.witch {
    background-image: url(images/love-witch.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}
.greasy {
    background-image: url(images/greasy.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

.bills {
    background-image: url(images/3bills.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}
.border {
    background-image: url(images/border.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}
.kumiko {
    background-image: url(images/kumiko.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

.bottoms {
    background-image: url(images/big-bot.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

.goldsmiths {
    background-image: url(images/goldsmiths.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}
.colourspace {
    background-image: url(images/colourspace.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	
}
.mandibles {
    background-image: url(images/mandibles.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	
}
.triangle {
    background-image: url(images/triangle.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	
}
.marcel {
    background-image: url(images/marcel.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position-y: center;
	
}
.substance {
    background-image: url(images/substance.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position-y: center;
	
}
.booth {
    background-image: url(images/booth.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	
}
.cake {
    background-image: url(images/cake.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	
}
.panel {
    background-image: url(images/panel.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	
}
#text-holder12 {
    margin-top: 50px;

    /*! width: 100%; */
}
.text-holder {
   
    padding: 20px;
    text-align: center;
    background-color: #5b5b5b;
    margin: 20px;
}
.link-text {
	font-size: 18px;
	font-family: 'Raleway', sans-serif;
	color: #fff;
	position: absolute;
	top: 40%;
	left: 40%;
	
	width: 70%;
	text-decoration: none;
	/*! margin-top: -5%; */
	margin-right: 0;
	margin-bottom: 0;
	margin-left: -25%;

    padding-top: 15px;
   padding-bottom: 15px;
background-color: #5C5055;
	/*! padding: 15px; */
}
.c-link-text {
	font-size: 18px;
	font-family: 'Raleway', sans-serif;
	color: #fff;
	position: relative;
	
	/*! left: 35%; */
	
	width: 100%;
	text-decoration: none;
	margin-top: 30%;
	/*! margin-right: 0; */
	margin-bottom: 0;
	/*! margin-left: -25%; */

    padding-top: 15px;
   padding-bottom: 15px;
background-color: #5C5055;
	/*! padding: 15px,30px; */
	padding-left: 50px;
	padding-right: 50px;
	top: 43%;
}



.dropbtn {
    background-color: #000000;
    color: white;
    padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 15px;
	padding-right: 15px;
    font-size: 30px;
    border: none;
    cursor: pointer;
	font-weight: bolder;
    width: 100%;
	margin-top: 0;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #000000;
}

.dropdown {
    float: none;
    position: fixed;
    display: inline-block;
    
    width: 100%;
    margin: auto;
    /*! background-color: aquamarine; */
    top: 0;
    left: 0;
    z-index: 1;
    /*! height: 100%; */
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 220px;
    overflow: auto;
box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    width: 100%;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: center   ;
    font-size: 22px;
	font-family: 'Patua One', sans-serif;
}

.dropdown a:hover {background-color: #f1f1f1}

.show {display:block;}
body {
	background-color: #eaeaea;
}
.soundcloud {
	float: left;
	position: relative;
	width: 30%;
	margin: 1.66%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain; /* you change this to "contain" if you don't want the images to be cropped */
	box-shadow: 3px 3px 4px #AFA1A6;
}

.square {
	float: left;
	position: relative;
	width: 30%;
	padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
	margin: 1.66%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain; /* you change this to "contain" if you don't want the images to be cropped */
	box-shadow: 3px 3px 4px #AFA1A6;
}



.rect {
	float: left;
	position: relative;
	width: 30%;
	padding-bottom : 39%; /* = width for a 1:1 aspect ratio */
	margin: 1.66%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover; /* you change this to "contain" if you don't want the images to be cropped */
	box-shadow: 3px 3px 4px #AFA1A6;
}
.rect2 {
	float: left;
	position: relative;
	width: 30%;
	padding-bottom : 42%; /* = width for a 1:1 aspect ratio */
	margin: 1.66%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover; /* you change this to "contain" if you don't want the images to be cropped */
	box-shadow: 3px 3px 4px #AFA1A6;
}
.rect3 {
	float: left;
	position: relative;
	width: 95%;
	padding-bottom : 300px; /* = width for a 1:1 aspect ratio */
	margin: 1.66%;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: contain; /* you change this to "contain" if you don't want the images to be cropped */
	
}
.square2 {
	float: left;
	position: relative;
	width: 30%;
	padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
	margin: 1.66%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain; /* you change this to "contain" if you don't want the images to be cropped */
	box-shadow: 3px 3px 4px #AFA1A6;
}

.square3 {
      position: relative;
    width: 80%;
    padding-bottom: 80%;
    margin: auto;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    /*! box-shadow: 3px 3px 4px #b6b6b6; */
    margin-left: auto;
    margin-right: auto;
    margin-top: 80px;
    max-width: 80%;
    /*! height: 1000px; */
}
.square4 {
    position: relative;
width: 100%;
padding-bottom: 100%;

background-position: center center;
background-repeat: no-repeat;
background-size: contain;
    /*! box-shadow: 3px 3px 4px #b6b6b6; */
    margin-left: auto;
    margin-right: auto;

    /*! height: 1000px; */
}
.head {
	width: 100%;
}
.albums {
	margin: 30px;
	/*! display: block; */
	/*! top: 300px; */
	
}


.gold_1{background-image:url('images/parasite.jpg');}
.gold_2{background-image:url('images/City-Lights.jpg');}
.gold_3{background-image:url('images/Insyriated.jpg');}
.gold_4{background-image:url('images/lucky.jpg');}
.gold_5{background-image:url('images/women.jpg');}
.gold_6{background-image:url('images/dogman.jpg');}
.gold_7{background-image:url('images/cate.jpg');}

.img_1-1{background-image:url('images/frousan-boylesmall.jpg');}
.img_1-2{background-image:url('images/frouspringsteen.jpg');}
.img_1-3{background-image:url('images/fun-girl-three.jpg');}

.img_2-1{background-image:url('images/blur.jpg');}
.img_2-2{background-image:url('images/crazy-at-the-boogaloo.jpg');}
.img_2-3{background-image:url('images/iggy-2.gif');}

.img_3-1{background-image:url('images/ff-nye.jpg');}
.img_3-2{background-image:url('images/frou-sells-out.gif');}
.img_3-3{background-image:url('images/froulo_nutini.jpg');}

.img_4-1{background-image:url('images/abba.jpg');}
.img_4-2{background-image:url('images/bad.jpg');}
.img_4-3{background-image:url('images/bjork.jpg');}

.img_5-1{background-image:url('images/gossip.jpg');}
.img_5-2{background-image:url('images/grace-jones.jpg');}
.img_5-3{background-image:url('images/grape.jpg');}

.img_6-1{background-image:url('images/led-zep-anim.gif');}
.img_6-2{background-image:url('images/her-name-is-frou-frou.jpg');}
.img_6-3{background-image:url('images/wonder-of-frou.gif');}

.img_7-1{background-image:url('images/jamc.jpg');}
.img_7-2{background-image:url('images/velvets-warhol.jpg');}
.img_7-3{background-image:url('images/happy-birthday-final.jpg');}

.img_8-1{background-image:url('images/leftwerk.jpg');}
.img_8-2{background-image:url('images/legende.jpg');}
.img_8-3{background-image:url('images/let-it-be.jpg');}

.img_9-1{background-image:url('images/like-a-large-gin.jpg');}
.img_9-2{background-image:url('images/lydi-lydi.jpg');}
.img_9-3{background-image:url('images/lydi-played-guitar.jpg');}

.img_10-1{background-image:url('images/lydi-sov.jpg');}
.img_10-2{background-image:url('images/madamy.jpg');}
.img_10-3{background-image:url('images/meat-is-murder.jpg');}

.img_11-1{background-image:url('images/mmefroutella.jpg');}
.img_11-2{background-image:url('images/motorhead.jpg');}
.img_11-3{background-image:url('images/nevermind.jpg');}

.img_12-1{background-image:url('images/pf.jpg');}
.img_12-2{background-image:url('images/pistols.jpg');}
.img_12-3{background-image:url('images/PrincessCharming.gif');}

.img_13-1{background-image:url('images/stooges.jpg');}
.img_13-2{background-image:url('images/take-a-look-at-my-gf.jpg');}
.img_13-3{background-image:url('images/the-lydbertines.jpg');}

.img_14-1{background-image:url('images/Pulp-fiction-004.jpg');}
.img_14-2{background-image:url('images/MFF-Graduate.jpg');}
.img_14-3{background-image:url('images/kiss.jpg');}

.img_15-3{background-image:url('images/trainspotting-005.jpg');}
.img_15-4{background-image:url('images/MaamWhoFell.jpg');}
.img_15-5{background-image:url('images/gigi.jpg');}
.img_15-6{background-image:url('images/b32.jpg');}
.img_15-7{background-image:url('images/last-night-in-soho.jpg');}
.img_15-8{background-image:url('images/fruman-cars.jpg');}
.img_15-9{background-image:url('images/frou-boots.jpg');}

.img_a1-1{background-image:url('images/karl.jpg');}
.img_a1-2{background-image:url('images/jules.jpg');}
.img_a1-3{background-image:url('images/wilton.jpg');}

.img_a2-1{background-image:url('images/pussy.jpg');}
.img_a2-2{background-image:url('images/jo-dud.jpg');}
.img_a2-3{background-image:url('images/williams.jpg');}

.img_a3-1{background-image:url('images/vez.jpg');}
.img_a3-2{background-image:url('images/jim.jpg');}
.img_a3-3{background-image:url('images/toya.jpg');}

.img_a4-1{background-image: url('images/jasmine.jpg');}
.img_a4-2{background-image: url('images/tweed.jpg');}
.img_a4-3{background-image:url('images/dudders.jpg');}

.img_a5-1{background-image:url('images/birgit.jpg');}
.img_a5-2{background-image:url('images/dave.jpg');}
.img_a5-3{background-image:url('images/kate-wilson.jpg');}
.img_a5-4{background-image:url('images/v-sister.jpg');}

.img_a6-1{background-image:url('images/cbt.jpg');}
.img_a6-2{background-image:url('images/herman.jpg');}
.img_a6-3{background-image:url('images/bod.jpg');}

.img_r1-1{background-image:url('images/hkk-washing-up.jpg');}
.img_r1-2{background-image:url('images/hkk-plane.jpg');}
.img_r1-3{background-image:url('images/hkk-mad.jpg');}

.img_r2-1{background-image:url('images/hkk-lagoon.jpg');}
.img_r2-2{background-image:url('images/hkk-vals.jpg');}
.img_r2-3{background-image:url('images/hkk-dance.jpg');}

.img_r3-1{background-image:url('images/hkk-gun.jpg');}
.img_r3-2{background-image:url('images/hkk-jumper.jpg');}
.img_r3-3{background-image:url('images/hkk-car.jpg');}

.img_r4-1{background-image:url('images/hkk-cards.jpg');}
	
.img_curzon{background-image:url('images/tap.jpg');}
.img_wilton{background-image:url('images/view.jpg');}
/*  following just for the demo */


body {
    font-size:20px;
    font-family: 'Lato',verdana, sans-serif;
    color: #fff;
    text-align:center;
    background:#D5CDD0;
}

#bottom {
    clear:both;
    margin:0 1.66%;
    width:89.68%;
    padding: 3.5%;
    background-color:#1E1E1E;
    color: #fff;
}
#bottom p{
    text-align:center;
    line-height:2em;
}
#bottom a{
    color: #000;
    text-decoration:none;
    border:1px solid #000;
    padding:10px 20px 12px;
    line-height:70px;
    background:#ccc;
    
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#bottom a:hover{
    background:#ECECEC;
    border:1px solid #fff;
}


#form {
    position:fixed;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -8em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
}
.form {
    font-size: 22px;
	font-family: 'Patua One', sans-serif;
    color: #000;
   
}
.form-text {
   font-size: 18px;
font-family: 'Patua One', sans-serif;
color: #848484;
padding: 10px;
margin: 10px;
width: 400px;
border: solid;
border-width: 2px;
border-color: #575757;
}
.form-titles {
     padding-bottom: 20px;
}
.form-buttons {
   font-size: 18px;
font-family: 'Patua One', sans-serif;
color: #fff;
padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 30px;
    padding-right: 30px;
margin: 10px;
background-color: #000;
    border: none;
}
@media only screen and (max-width: 800px) {
    .square {

        width: 46%;
        padding-bottom: 46%;
      
    }
	 .square2 {

        width: 46%;
        padding-bottom: 46%;
      
    }
	  .soundcloud {

         width: 100%;
    
        margin-left: 0;
        margin-bottom: 10%;
      
    }
   
}

@media only screen and (max-width: 550px) {
    .square {

        width: 100%;
        padding-bottom: 100%;
        margin-left: 0;
        margin-bottom: 10%;
    }
	
	 .soundcloud {

        width: 100%;
    
        margin-left: 0;
        margin-bottom: 10%;
    }
	  .square2 {

        width: 100%;
        padding-bottom: 100%;
        margin-left: 0;
        margin-bottom: 10%;
    }
	
	.rect {

        width: 100%;
        padding-bottom: 130%;
        margin-left: 0;
        margin-bottom: 10%;
    }
	.rect2 {

        width: 100%;
        padding-bottom: 140%;
        margin-left: 0;
        margin-bottom: 10%;
    }
	.form-text {

width: 260px;
}

#form {
   
  margin-top: -7em;
 
}
.dj-intro {
	
	padding-left: 30px;
	padding-right: 30px;
	padding-bottom: 30px;
	font-size: 18px;
line-height: 28px;
}

 #animation_container {
	
	top:10%;
 
  }
.exp {

    height: 60vw;
background-position-x: center;
}
}
.curzon-img {
    margin-top: 0;
   
   
   
    height: auto;
}
.c-txt {
    margin-top: 30%;
  
}