@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700');
body{
	-webkit-font-smoothing: antialiased;
	margin:0;
	font-family: "Roboto", Helvetica, Arial, sans-serif;
	color:rgba(0,0,0,0.85);
	background: #fff;
}

ul,menu,dir{
    margin: 0;
    list-style-type: none;
    padding: 0;
}

#main{
    width: 1000px;
    margin: auto;
}

#main #wrapper{
	margin-top:25px;
}

#main #wrapper #container #header{
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

#main #wrapper #container #header a{
	border:0;
	color:inherit;
	text-decoration:none;
}

#main #wrapper #container #header a #logo-image{
    background: url(https://prreeve.co.uk/assets/img/logo.JPG);
    height: 193px;
    width: 520px;
    background-size: cover;
    background-repeat: no-repeat;
    margin: auto;
}

#main #wrapper #container #header .navigation .nav-container ul.link-list{
    width: 500px;
    margin: auto;
    margin-top: 20px;
}

#main #wrapper #container #header .navigation .nav-container ul.link-list li{
    display: inline-block;
    text-align: center;
    width: 100px;
    margin: 0px 10px;
    border-bottom: 0px solid transparent;
    transition: all .2s ease-in-out;
	padding-bottom: 10px;
}

#main #wrapper #container #header .navigation .nav-container ul.link-list li:hover, #main #wrapper #container #header .navigation .nav-container ul.link-list li.selected{
	border-bottom: 5px solid rgba(0,0,0,0.85);
	font-weight:bold;
}

#main #wrapper #container #page{
	margin-top: 20px;
}

#main #wrapper #container #page a{
	text-decoration: none;
    color: #1e88e5;
}

#main #wrapper #container #page #col_1{
	float: left;
    width: 450px;
    margin-left: 20px;
}

#main #wrapper #container #page.cu #col_1{
    margin-top: 50px;
}

#main #wrapper #container #page.h #col_1{
    margin-top: 90px;
}

#main #wrapper #container #page.c #col_2{
    margin-top: 140px;
}	

@media only screen and (max-width: 940px){
	#main{
		width: 90%;
	}
	#main #wrapper #container #page.c #col_2 {
		    float: left !important;
			width: 450px !important;
			margin-left: 0px !important;
			margin-top: 0px;
	}	
	#main #wrapper #container #page.c #col_1 {
			margin-left: 0px !important;
	}	
	#main #wrapper #container #page.c{
	    margin: auto !important;
   		width: 450px !important; 
   		text-align: center;
   	}
}
	
#main #wrapper #container #page.h #col_1 h1{
    font-size: 1.69em;
    text-align: center;
}

#main #wrapper #container #page.h #col_1 p{
	font-size: 16px;
}

#main #wrapper #container #page #col_2{
	float: right;
    width: 450px;
    margin-left: 20px;
}

#main #wrapper #container #page.h #col_2 #image-van{
    display: block;
    height: 300px;
    background: url(https://prreeve.co.uk/assets/img/img_van.JPG);
    background-size: cover;
    width: 326px;
}

#main #wrapper #container #page.h #col_2 #image-home-1{
    display: block;
    height: 300px;
    background: url(https://prreeve.co.uk/assets/img/img_1.JPG);
    background-size: cover;
    width: 326px;
    margin-top: 20px;
}

#main #wrapper #container #page #styled-image{
	height: 250px;
    background-size: cover !important;
    width: 300px;
    margin: auto;
    margin-bottom: 10px;
    background-repeat: no-repeat !important;
}

#main #wrapper #container #col_3 #gallery{
    height: 795px;
    margin-bottom: 50px;
    border: 1px solid rgba(0,0,0,0.85);
    border-radius:3px;
}

#main #wrapper #container #col_3 #gallery #gallery-wrapper{
    display:none;
}

#main #wrapper #container #col_3 #gallery #gallery-loader{
	width: 100px;
    margin: auto;
    margin-top: 230px;
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

#main #wrapper #container #col_3 #gallery .circular{
	animation: rotate 2s linear infinite;
    height: 100px;
    transform-origin: center center;
    width: 100px;
}

#main #wrapper #container #col_3 #gallery .circular .path{
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite;
    stroke: #000000;
    stroke-linecap: round;
}

#main #wrapper #container #col_3 #gallery #gallery-large{
    height: 500px;
    background-size: contain!important;
    background-repeat: no-repeat!important;
    background-color: rgba(0,0,0,0.83)!important;
    background-position: center!important;
}

#main #wrapper #container #col_3 #gallery #gallery-lower{
    border-top: 1px solid rgba(0,0,0,0.85);
    width: 100%;
}

#main #wrapper #container #col_3 #gallery #gallery-lower ul{
	width: 910px;
    margin: auto;
}

#main #wrapper #container #col_3 #gallery #gallery-lower ul li{
    display: inline-block;
}

#main #wrapper #container #col_3 #gallery #gallery-lower ul li a{
    height: 80px;
    width: 80px;
    background-size: cover !important;
    display: inline-block;
    margin-top: 10px;
    margin-left: 5px;
    transition:.5s ease;
	border: 1px solid rgba(0,0,0,0);
}

#main #wrapper #container #col_3 #gallery #gallery-lower ul li a.s{
	border: 1px solid rgba(0,0,0,0.5);
	border-radius:5px;
}

#main #wrapper #container #col_3 #gallery #gallery-lower ul li a:hover{
	border-radius:5px;
}

#main #wrapper #container #col_3 #gallery #gallery-controls .next-picture {
	z-index: 1;
    float: right;
    margin-top: 25%;
    margin-right: 20px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    height: 34px;
    width: 34px;
    border-radius: 50%;
    border: 2px solid #dfdfdf;
    overflow: hidden;
    color: transparent;
    text-indent: 100%;
    white-space: nowrap;
    -webkit-transition: border-color .3s;
    -moz-transition: border-color .3s;
    transition: border-color .3s;
}

#main #wrapper #container #col_3 #gallery #gallery-controls .next-picture:after{
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(https://prreeve.co.uk/assets/img/arrow_next.svg) no-repeat;
}

#main #wrapper #container #col_3 #gallery #gallery-controls .prev-picture {
	z-index: 1;
    float: left;
    margin-top: 25%;
    margin-left: 20px;
    -webkit-transform: translateY(-50%) rotate(180deg);
    -moz-transform: translateY(-50%) rotate(180deg);
    -ms-transform: translateY(-50%) rotate(180deg);
    -o-transform: translateY(-50%) rotate(180deg);
    transform: translateY(-50%) rotate(180deg);
    height: 34px;
    width: 34px;
    border-radius: 50%;
    border: 2px solid #dfdfdf;
    overflow: hidden;
    color: transparent;
    text-indent: 100%;
    white-space: nowrap;
    -webkit-transition: border-color .3s;
    -moz-transition: border-color .3s;
    transition: border-color .3s;
}

#main #wrapper #container #col_3 #gallery #gallery-controls .prev-picture:after{
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(https://prreeve.co.uk/assets/img/arrow_next.svg) no-repeat;
}