/* 
Theme Name: Trees 2 Go
Theme URI: 
Author: Michael Rosser
Version: 2.0 
Tags: Simple, effective 
*/    

body {
        margin: 0;
        padding: 0;
        font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
         background-color:#e6e6e6;
        
    }
    
    img {
        max-width: 100%;
        height: auto;
    }
    
    /*GridCols*/
	*,
	*:before,
	*:after {
		box-sizing: inherit;
	}
	
	.col {
		padding:1em;
		margin: 8px;
	}
    
    .colfooter {
        padding:1em;
		margin: 8px;
        text-align: center;
        border-top: thin rgba(169,169,169,1.00) solid;
        
    }

.colfooter p {
    margin: 0;
    padding: 0;
}

.colfooter a:link, .colfooter a:visited {
    color: orange;
    text-decoration: none;
    
}

	[class*='col-'] {
		width:100%;
		float: left;
		min-height: 1px;
	}
	
	.col-mob-1 {width:8.33333%;}
	.col-mob-2 {width:16.66667%;}
	.col-mob-3 {width:25%;}
	.col-mob-4 {width:33.33333%;}
	.col-mob-5 {width:41.66667%;}
	.col-mob-6 {width:50%;}
	.col-mob-7 {width:58.33333%;}
	.col-mob-8 {width:66.66667%;}
	.col-mob-9 {width:75%;}
	.col-mob-10 {width:83.33333%;}
	.col-mob-11 {width:91.66667%;}
	.col-mob-12 {width:100%;}
    
    .header {
        height: auto;
        overflow: hidden;
           background-image: url('https://www.trees2go.wales/wp/wp-content/uploads/2020/02/TreesHeader2.jpg');
        background-repeat: repeat-x;
        background-size: cover;

    }


  .row_container {
             max-width: 1200px;
             margin: 0 auto;
             height: auto;
     
         }

.details a:link, .details a:visited {
    color: orange;
    text-decoration: none;
    
}
    
    .logo {
        width: 60%;
        height: auto;
        overflow: hidden;
        margin: 0 auto;
    }
    
    .nav {
  display: none;


    }

        .quick_links {
             height: auto;
             width: 100%;
            overflow: hidden;
         }

.quick_links p {
    margin: 0;
    padding: 0;
    line-height: 20px;
}
         
         .quick_links a {
display: block;
  padding: 0;
             line-height: 20px;
             text-align: center;
  color: white;
  text-decoration: none;
  font-size: 17px;
  text-align: center; /* If you want the text to be centered */
}

.quick_links img {
    margin: 10px;
}


  .quick_links a:hover {
             color: green;
         }

.social {
    width: 33%;
    float: left;
}
    
        .details {
             margin: 0 auto;
             color: white;
             text-align: center;
            margin-bottom: 10px;

         }

.details p {
    margin: 0;
    padding: 0;
}


.content {
       border-bottom: thin rgba(0,0,0,0.71) solid;
    height: auto;
    overflow: hidden;
}

.content a:link, .content a:visited {
    color: green;
    text-decoration: none;
    list-style: none;
    list-style-type: none;
    
}

.content li {
    list-style-type: none;
}

.content h1 {
    color: orange;
}
    

.sidebar_mobile {
    padding: 10px;
    height: auto;
}

.sidebar_desktop {
    display: none;
}

.post-wrap {
    border-bottom: thin rgba(73,73,73,1.00) dashed;
}

.row1 {
    height: auto;
    overflow: hidden;
    margin-bottom: 10px;
}

    .row2 {
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      
        height: auto;
        overflow: hidden;
        width: 100%;
        
    }



.overlay {
    background-color: rgba(0,0,0,0.74);
    height: auto;
    overflow: hidden;
    width: 100%;
    
}
    
    .row2 p {
        text-align: center;
        color: white;
    }
    
    .slideshow {
        width: 100%;
        height: auto;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }


/*Slideshow*/

.container {
  width: 100%;
  height: 300px;
    overflow: hidden;
  position: relative;
	background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.container .slide {
  z-index: 1;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 100%;
  transition: opacity 1s ease-in-out;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
}
.container .slide.show {
  opacity: 1;
}

.show {
    opacity: 1;
        }


.services {
    width: 100%;
    height: auto;
    overflow: hidden;
    margin: 0 auto;
}


.services_image1 {
    width: 100%;
    height: 200px;
     background-image: url('https://www.trees2go.wales/wp/wp-content/uploads/2019/10/services1.jpg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
}

.services_image2 {
    width: 100%;
    height: 200px;
     background-image: url('https://www.trees2go.wales/wp/wp-content/uploads/2019/10/services2.jpg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
}

.services_image3 {
    width: 100%;
    height: 200px;
     background-image: url('https://www.trees2go.wales/wp/wp-content/uploads/2019/10/services3.jpg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
}

.services_text {
    width: 100%;
    height: auto;
    text-align: center;
    overflow: hidden;
    margin: 0 auto;
}

.services_text p {
       padding: 0;
    margin: 0;
    line-height: 35px;
}

.find_us p {
    padding: 0;
    margin: 0;
    line-height: 20px;
    
}
    
     @media only screen and (min-width: 768px) {
        		.col-dt-1 {width:8.33333%;}
	.col-dt-2 {width:16.66667%;}
	.col-dt-3 {width:25%;}
	.col-dt-4 {width:33.33333%;}
	.col-dt-5 {width:41.66667%;}
	.col-dt-6 {width:50%;}
	.col-dt-7 {width:58.33333%;}
	.col-dt-8 {width:66.66667%;}
	.col-dt-9 {width:75%;}
	.col-dt-10 {width:83.33333%;}
	.col-dt-11 {width:91.66667%;}
	.col-d-12 {width:100%;}
         
         .header {
             height: 180px;
             position: relative;
             background-size: contain;
         }
         
         .row_container {
             max-width: 1200px;
             margin: 0 auto;
             height: auto;
         }
         
         .logo {
             width: 300px;
             height: auto;
             float: left;
              position: absolute;
             bottom: 35px;
             z-index: 2;
            
             
         }
         
         .sidebar {
             height: auto;
             
         }
         
         .sidebar_mobile {
    padding: 10px;
    height: auto;
            display: none;
}

.sidebar_desktop {
    display: inherit;
}
         
         .details {
             float: right;
             color: white;
             text-align: center;
             padding: 10px;
         }
         
         .nav {
             height: 60px;
             width: 100%;
             position: absolute;
             bottom: 0;
             z-index: 0;
               display: inherit;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#62b53f+0,0d6b2c+100 */
background: #62b53f; /* Old browsers */
background: -moz-linear-gradient(top,  #62b53f 0%, #0d6b2c 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #62b53f 0%,#0d6b2c 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #62b53f 0%,#0d6b2c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#62b53f', endColorstr='#0d6b2c',GradientType=0 ); /* IE6-9 */
         }
         
         .nav a {
  float: left;
  padding: 0;
             line-height: 60px;
             text-align: center;
  color: white;
  text-decoration: none;
  font-size: 17px;
  width: 15%; /* Four equal-width links. If you have two links, use 50%, and 33.33% for three links, etc.. */
  text-align: center; /* If you want the text to be centered */
}

         .nav a:hover {
             color: orange;
         }
         
    }