html{
background:#000;
}

body{
	background-image: url('images/image12.jpg');
	color: #fff;
	/*font-size: 87.5%;*/
	font-family:Arial, 'Lucida sans Unicode';
	text-align:left;
	margin: 0;
	width:100%;
	clear:both;
	
}

h1{
font-size:2.5vw;/*220%;*/
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; 
font-weight: 100; 
letter-spacing: .2rem;
float:left;
/*line-height: 26px;*/
/*border-bottom:solid thin;*/
margin:3% 0 0 2%;
/*text-transform:uppercase;*/
padding-bottom:0;
display:block;
width:25%;

}

h1 a{
text-decoration:none;
color:#fff;
}

h1 a:hover{
text-decoration:none;
color:#fff;
}

h1 a:visited{
text-decoration:none;
color:#fff;
}


h3{
font-size:1.7vw;/*220%;*/
/*line-height: 26px;*/
/*border-bottom:solid thin;*/
margin-left:8%;
margin-bottom:4%;
margin-top:0;
/*text-transform:uppercase;*/
display:block;
width:30%;
font-weight:normal;

}

nav{
font-size:1.2vw;
float:left;
/*width:70%;*/
margin-top:4.3%;
margin-bottom:3%;
text-align:left;
/*padding-top:3%;*/

/*border-top: solid;
border-bottom:solid;

display:block;*/
/*border-bottom:solid thin;
width:56%;*/

margin-left:0;
padding-left:0;
width:50%;
}

nav a{
color:#fff;
text-decoration:none;
padding-left:4%;
/*float:left;*/
/*margin-left:2%;
font-weight:bold;
padding:1%;
color:#fff;*/
}

nav a:hover{
color:#F3C;
}

/* sidenavigation*/
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}
.lines{
display:none;
}

/*sidenavigation ends*/


.hide{
display: none;
}

.show{
display: block;
}

ul{
list-style:none;
margin:0;
padding-top:0;
padding-left:8%;
width:90%;
}

li{
/*display:block;*/


margin-bottom:1%;
/*width:100%;*/
margin-left:0;
font-size:1.2vw;
width:100%;
}

li a{
text-decoration:none;
color:#fff;
display:block;
width:100%;
padding:2% 3%;
background-color:#695b63;

}

li a:hover{
background-color:#eb6bb9;
}

lh{
display:block;
padding:2% 3%;
background-color:#c62e8b;
margin-bottom:1%;
margin-left:0;
width:100%;
font-size:1.3vw;
}

lh a{
text-decoration:none;
color:#fff;
}

lh a:hover{
color:#f050b2;
}


#leftmenu{
clear:both;
float:left;
width:25%;
margin-right:3%;
height:100vh;
}

.main_text{
width:58%;
float:left;
margin-left:0%;
background: rgba(255,255,255,0.95);
padding:0.5% 1%;
margin-top:2%;
}

.main_text p{
color:#525252;
font-size:95%;
color:#525252;
}

.main_text h1{
color:#525252;
width:100%;
font-size:24px;
padding-left:0;
margin-left:0;
margin-bottom:20px;
font-weight:bold;
font-family:Arial, 'Lucida sans Unicode';
letter-spacing: normal;
text-transform:uppercase;

}

.socialmedia{
float:left;
width:58%;
margin-top:1%;
}

.socialmedia img{
padding-right:10px;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}

.socialmedia img:hover{
opacity: 1;
filter: alpha(opacity=100); /* For IE8 and earlier */
}

.socialmedia a{
text-decoration:none;
}

/* css for slider below */

.container
{
position:relative;
overflow:hidden;
width:60%;
height:60vh;
background-color:#000;
display:block;
float:left;
margin-top:3%;
}

.containervimeo
{
position:relative;
overflow:hidden;
width:60%;
/*height:60vh;*/
height:auto;
background-color:#000;
display:block;
float:left;
margin-top:3%;
}

.container .slider
{
position: absolute;
top:0;
left:0;
width:1000%;
height:100%;
animation:animate 17s linear infinite;
} 

.container .slidervimeo
{
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
} 

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.container .slider:hover {
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
}

.container iframe
{
width:100%;
height:100%;
object-fit:fill;

}

.container .slidervimeo .slide
{
position:relative;
width:10%;
height:100%;
float:left;
background-color:#000;
}


.container .slider .slide img
{
width:100%;
height:100%;
object-fit:cover;

}

.container .slider .slide
{
position:relative;
width:10%;
height:100%;
float:left;
background-color:#000;
}

.container .slider .slide .caption
{
position:absolute;
bottom:20px;
/*left:60px;*/
right:20px;
padding:10px;
background: rgba(191, 40, 128, 0.8);
box-sizing:border-box;
transition: 0.5s;
}

.container .slider .slide .caption h2
{
margin:0 0 20px;
padding:0;
color:#fff;
font-size:48px;
transition: 0.5s;
}

.container .slider .slide .caption p
{
margin:0;
padding:0;
color:#fff;
font-size:18px;
transition:0.5s;
}

.container .slider .slide.slide1
{
/*background: url(images/barryisland/Barry_Island_1.jpg);
background-size:cover;
background-position:center;*/
}

.container .slider .slide.slide2
{
/*background: url(images/barryisland/barryvimeo.jpg);
background-size:cover;
background-position:center;*/
}

.container .slider .slide.slide3
{
/*background: url(images/barryisland/Barry_Island_2.jpg);
background-size:cover;
background-position:center;*/
}

.container .slider .slide.slide4
{
/*background: url(images/barryisland/Barry_Island_3.jpg);
background-size:cover;
background-position:center;*/
}
.container .slider .slide.slide5
{
/*background: url(images/barryisland/Barry_Island_1.jpg);
background-size:cover;
background-position:center;*/
}

@keyframes animate
{
 0%{
 	left:0;
 	}
 20%
 	{
 	left: 0;
 	}
 25%
 	{
 	left:-100%;
 	}
 45%
 	{
 	left:-100%;
 	}
  50%
  	{
 	left:-200%;
 	}
  70%{
 	left:-200%;
 	}
  75%{
 	left:-300%;
 	}
  95%{
 	left:-300%;
 	}
  100%
  {
 	left:-400%;
 }

}

@media (max-width:768px)
{
/*.container .slider .slide .caption
{
bottom:20px;
left:20px;
right:20px;
padding:20px;

}
*/
.container .slider .slide .caption
{
display:none;
}
.container .slider .slide .caption h2
{
margin:0 0 10px;
font-size:30px;
}

.container .slider .slide .caption p
{
font-size:16px;
}

ul{
width:100%;
margin:0;
padding:0;
}

li{
/*display:block;*/
font-size:30px;
}

li a{
text-decoration:none;
color:#fff;
display:block;
width:94%;
padding:2% 3%;
background-color:#695b63;

}

li a:hover{
background-color:#eb6bb9;
}

lh{
display:block;
padding:2% 3%;
background-color:#c62e8b;
margin-bottom:1%;
margin-left:0;
width:100%;
font-size:1.3vw;
}

lh a{
text-decoration:none;
color:#fff;
}

lh a:hover{
color:#f050b2;
}


 {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

.lines{
display:block;
}

h1{
font-size:22px;/*220%;*/
/*line-height: 26px;*/
/*border-bottom:solid thin;*/
margin:8px 0 6px 5%;
/*text-transform:uppercase;*/
width:75%;

}

nav{
display:none;
}

#leftmenu{
display:none;
}

.container
{
width:100%;
height:50vh;
}

.containervimeo
{
width:100%;
height:auto;
}

.main_text{
width:92%;
margin:4% 2% 4% 0;
padding:4% 4%;
/*margin:2%;*/
}

.main_text h1{
font-size:18px;
margin-bottom:10px;
}

.main_text p{
color:#000;
font-size:95%;
}


}
 
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
    
}