/*---------------------------
[Template Structure]

Project:	 Circles
Version:	 1.0
Primary Use: Site Template 
Layout:      Responsive
Platforms:   Mobile & Tablet
-----------------------------



@charset "UTF-8";

/* 1. General */


body{
    background-color:#FFFFFF;
}

.bg-blue1{      background-color:#3498db!important;  }
.bg-blue2{      background-color:#2980b9!important;  }
.bg-magenta1{   background-color:#9b59b6!important;  }
.bg-magenta2{   background-color:#8e44ad!important;  }
.bg-dark1{      background-color:#34495e!important;  }
.bg-dark2{      background-color:#2c3e50!important;  }
.bg-green1{     background-color:#2ecc71!important;  }
.bg-green2{     background-color:#27ae60!important;  }
.bg-red1{       background-color:#e74c3c!important;  }
.bg-red2{       background-color:#c0392b!important;  }
.bg-teal1{      background-color:#1abc9c!important;  }
.bg-teal2{      background-color:#16a085!important;  }
.bg-yellow2{    background-color:#f39c12!important;  }
.bg-yellow1{    background-color:#f1c40f!important;  }
.bg-orange1{    background-color:#d35400!important;  }
.bg-orange2{    background-color:#e67e22!important;  }

.text-blue1{      color:#3498db!important;  }
.text-blue2{      color:#2980b9!important;  }
.text-magenta1{   color:#9b59b6!important;  }
.text-magenta2{   color:#8e44ad!important;  }
.text-dark1{      color:#34495e!important;  }
.text-dark2{      color:#2c3e50!important;  }
.text-green1{     color:#2ecc71!important;  }
.text-green2{     color:#27ae60!important;  }
.text-red1{       color:#e74c3c!important;  }
.text-red2{       color:#c0392b!important;  }
.text-teal1{      color:#1abc9c!important;  }
.text-teal2{      color:#16a085!important;  }
.text-yellow2{    color:#f39c12!important;  }
.text-yellow1{    color:#f1c40f!important;  }
.text-orange1{    color:#d35400!important;  }
.text-orange2{    color:#e67e22!important;  }

.facebook-color{    background-color:#3b5998;    color:#FFFFFF;}
.twitter-color{     background-color:#4099ff;    color:#FFFFFF;}
.google-color{      background-color:#d34836;    color:#FFFFFF;}
.pinterest-color{   background-color:#C92228;    color:#FFFFFF;}
.sms-color{         background-color:#27ae60;    color:#FFFFFF;}
.mail-color{        background-color:#3498db;    color:#FFFFFF;}


/*Fullscreen Slider Image*/
.slider-image-1{background-image:url(../images/pictures/3.jpg);}
.slider-image-2{background-image:url(../images/pictures/1.jpg);}
.slider-image-3{background-image:url(../images/pictures/5.jpg);}

/*Background for fullscreens*/

.bg1{
    background-image:url(../images/pictures/1.jpg);   
    background-position:center center;
}

.bg2{
    background-image:url(../images/pictures/2.jpg);   
    background-position:center center;
}

.bg3{
    background-image:url(../images/pictures/3.jpg);   
    background-position:center center;
}

.bg4{
    background-image:url(../images/pictures/4.jpg);   
    background-position:center center;
}

/*Styles*/

.header{
    position:fixed;
    width:100%;
    z-index:98;
    padding-left:30px;
    padding-right:30px;
    padding-top:20px;
    background-color:#FFFFFF;
}

.header-clear{
    height:120px;
}


.header .decoration{
    margin-bottom:0px;
}
  .myIframe {
position: relative;
padding-bottom:90%;
padding-top:0px;
height: 0;
margin-top: -26px;
overflow: auto; 
-webkit-overflow-scrolling:touch; 

} 
.myIframe iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}

.header-logo{
    height:100%;
	max-width:150px;
    margin-top:9px;
    float:left;
}
.header-icons{
    height:40px;
    padding-top:5px;
    padding-right:5px;
    width:125px;
    float:right;
    margin-bottom:25px;
}

.header-icons a{
    float:right;
    width:30px;
    height:30px;
    margin-left:10px;
    border-radius:30px;
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    -o-transform: scale(1,1);
    -ms-transform: scale(1,1);
    transform: scale(1,1);
    -webkit-transition: all 150ms ease;
    -moz-transition: all 150ms ease;
    -ms-transition: all 150ms ease;
    -o-transition: all 150ms ease;
    transition: all 150ms ease;
}

.header-icons a:hover{
    -moz-transform: scale(1.15,1.15)!important;
    -webkit-transform: scale(1.15,1.15)!important;
    -o-transform: scale(1.15,1.15)!important;
    -ms-transform: scale(1.15,1.15)!important;
    transform: scale(1.15,1.15)!important;
    -webkit-transition: all 150ms ease;
    -moz-transition: all 150ms ease;
    -ms-transition: all 150ms ease;
    -o-transition: all 150ms ease;
    transition: all 150ms ease;
}

.header-icons a i{
    font-size:10px;
    line-height:30px;
    width:30px;
    text-align:center;
    color:#FFFFFF;
}

.footer{
    margin-bottom:12px;
}

/*Homepage Settings*/

@media(min-width:768px){/*
    .circle-slider{
        width:400px!important;
        margin-left:auto;
        margin-right:auto;
    }*/
}

.homepage-slider{
    margin-top:-35px;
}

.full-slider{
    margin-top:-35px!important;
}

.circle-slider{
    margin-top:-35px!important;
}

.circle-slider div{
    padding-top:10px!important;
}

.circle-slider img{
    width:84%!important;
    margin-left:auto;
    margin-right:auto;
    display:block;
    border-radius:100%;
    border:solid 10px #FFFFFF;
    -webkit-box-shadow: 0 0 1px 1px rgba(0,0,0,0.3);
            box-shadow: 0 0 1px 1px rgba(0,0,0,0.3);
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    -o-transform: scale(1,1);
    -ms-transform: scale(1,1);
    transform: scale(1,1);
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease; 
}

.circle-slider img:hover{
    -moz-transform: scale(1.02,1.02);
    -webkit-transform: scale(1.02,1.02);
    -o-transform: scale(1.02,1.02);
    -ms-transform: scale(1.02,1.02);
    transform: scale(1.02,1.02);
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;  
}

.circle-slider div h1{
    text-align:center;
    font-size:20px;
    font-weight:600;
    padding-top:30px;
}

.circle-slider div em{
    display:block;
    text-align:center;
    font-style:normal;
    font-size:12px;
    margin-top:-5px;
}

.circle-slider div p{
    text-align:center;
    padding-left:30px;
    padding-right:30px;
}

.circle-slider div a{
    margin-top:-10px;
    margin-bottom:20px!important;
}

/*Thumbnails Columns*/

@media (min-width:760px){
    .thumb-column{
        width:50%;
        float:left;
    }
}

.thumb-column{
	line-height:24px;
	display:block;
	padding-bottom:0px;
}

.thumb-column a{
	display:block;
	text-align:right;
}

.thumb-column img{
    margin-top:5px;
    -moz-transform: scale(0.95, 0.95);
    -webkit-transform: scale(0.95, 0.95);
    -o-transform: scale(0.95, 0.95);
    -ms-transform: scale(0.95, 0.95);
    transform: scale(0.95, 0.95);
	width:100px;
	height:100px;
	border-radius:100px;
	float:left;
	margin-right:20px;
    -webkit-transition: all 150ms ease;
    -moz-transition: all 150ms ease;
    -ms-transition: all 150ms ease;
    -o-transition: all 150ms ease;
    transition: all 150ms ease;
}

.thumb-column img:hover{
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    -o-transform: scale(1,1);
    -ms-transform: scale(1,1);
    transform: scale(1,1);
    -webkit-transition: all 150ms ease;
    -moz-transition: all 150ms ease;
    -ms-transition: all 150ms ease;
    -o-transition: all 150ms ease;
    transition: all 150ms ease;
}

.thumb-column strong{
	color:#1a1a1a;
	display:inline-block;
	padding-bottom:5px;
	font-size:15px;
    padding-top:10px;
    font-weight:700;
}

.thumb-column em{
	font-style:normal;
    line-height:28px;
}


@media (min-width:600px){
	.thumb-column img{
		width:140px;
		height:140px;
		border-radius:150px;	
	}
	
	.thumb-column em{
		line-height:28px;	
	}
	
	.thumb-column strong{
		padding-top:10px;	
	}
}

/*Content Heading*/
/*///////////////*/

.content-heading{
    z-index:60;
    position:relative;
	margin-bottom:30px;	
}

.content-heading h4{
	color:#FFFFFF;
	position:absolute;	
	z-index:20;
	text-transform:uppercase;
	margin-top:37px;
	padding-left:30px;
    pointer-events:none;
    font-weight:800;
}

.content-heading{
	height:120px;	
}

.content-heading p{
	color:#FFFFFF;
	position:absolute;	
	z-index:98;
	margin-top:58px;
	padding-left:30px;
	opacity:0.5;
    pointer-events:none;
}

.content-heading .overlay{
	z-index:9;
	background-color:rgba(0,0,0,0.8);
}

.content-heading a{
	font-size:20px;
	position:absolute;
	color:#1f1f1f!important;
	right:31px;	
	z-index:98;
    width:50px;
    height:50px;
    text-align:center;
    line-height:50px;
    background-color:#FFFFFF;
    border-radius:50px;
    margin-top:35px;
}

.content-heading img{
    min-height:120px;
	width:100%;
	display:block;
	position:relative;
	z-index:2;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

.content-heading img:hover{
    filter: blur(3px);  
    -webkit-filter:blur(3px);
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
}

@media (min-width:768px){
	.content-heading{
		height:140px;	
	}
	
	.content-heading h4{
		font-size:20px;	
		margin-top:45px;
		padding-left:50px;
	}
	
	.content-heading p{
		font-size:13px;	
		margin-top:75px;
		padding-left:50px;
	}
	
    .content-heading a{
        font-size:20px;
        position:absolute;
        color:#1f1f1f!important;
        right:31px;	
        z-index:98;
        width:60px;
        height:60px;
        top:5px;
        text-align:center;
        line-height:60px;
        background-color:#FFFFFF;
        border-radius:60px;
        margin-top:35px;
    }

}

/*////////////////////*/
/*Quote & Staff Slider*/
/*////////////////////*/

.staff-item img{
	border-radius:300px;	
	max-width:150px;
	margin-left:auto;
	margin-right:auto;
    margin-top:10px;
    -webkit-transition: all 150ms ease;
    -moz-transition: all 150ms ease;
    -ms-transition: all 150ms ease;
    -o-transition: all 150ms ease;
    transition: all 150ms ease;
}

.staff-item img:hover{
    -moz-transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
    -o-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
    -webkit-transition: all 150ms ease;
    -moz-transition: all 150ms ease;
    -ms-transition: all 150ms ease;
    -o-transition: all 150ms ease;
    transition: all 150ms ease;
}

.staff-item h4{
	text-align:center;
	margin-top:20px;	
	font-size:16px;
}

.staff-item em{
	text-align:center;
	font-size:12px;
	color:#e34e47;
	display:block;
	margin-top:-10px;
	margin-bottom:10px;
	font-style:normal;
}

.staff-item strong{
    font-size:12px;
	display:block;	
	font-weight:400;
	text-align:center;
	padding-left:20px;
	padding-right:20px;
    margin-bottom:20px;
	line-height:28px;
}

/* 8. Quote Slider */

.quote-slider h4{
	font-family:'Source Sans Pro', sans-serif;
	font-size:18px;
	font-weight:300;	
	width:87%;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	line-height:36px;
}

.quote-slider a{
	text-align:center;
	margin-top:20px;	
}

/*Center Socials*/

.center-socials{
    width:165px;
    margin-left:auto;
    margin-right:auto;  
    margin-bottom:0px;
    padding-top:10px;
    margin-top:-10px;
}

.center-socials a{
    -webkit-transition: all 250ms ease;
    -moz-transition: all 250ms ease;
    -ms-transition: all 250ms ease;
    -o-transition: all 250ms ease;
    transition: all 250ms ease;
    margin-bottom:30px;
    -webkit-box-shadow: 0 1px 5px 2px rgba(0,0,0,0.15);
            box-shadow: 0 1px 5px 2px rgba(0,0,0,0.15); 
}

.center-socials a:hover{
    color:#FFFFFF;
    transform:scale(1.2, 1.2);
    -webkit-transition: all 250ms ease;
    -moz-transition: all 250ms ease;
    -ms-transition: all 250ms ease;
    -o-transition: all 250ms ease;
    transition: all 250ms ease;
}

.center-socials a i{
    width:40px;
    height:40px;
    line-height:40px;
}

.center-socials .facebook-social{
    width:40px;
    height:40px;
    text-align:center;
    line-height:40px;
    border-radius:40px;
    float:left;
    margin-left:7px;
    margin-right:7px;
}

.center-socials .twitter-social{
    width:40px;
    height:40px;
    text-align:center;
    line-height:40px;
    border-radius:40px;
    float:left;
    margin-left:7px;
    margin-right:7px;
}

.center-socials .google-social{
    width:40px;
    height:40px;
    text-align:center;
    line-height:40px;
    border-radius:40px;
    float:left;
    margin-left:7px;
    margin-right:7px;
}


.show-share-bottom{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:25px;
    color:#FFFFFF;
}

.show-share-bottom:hover{color:#FFFFFF;}

/*Animation*/

.highlight-link {    
    -webkit-animation: highlights 550ms infinite;
    -moz-animation: highlights 550ms infinite;
    -ms-animation: highlights 550ms infinite;
    -o-animation: highlights 550ms infinite;
    animation: highlights 550ms infinite;
}

@-webkit-keyframes highlights {
    100% { 
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
    }
    50% { 
        -moz-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        -o-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    } 
}




















































