@charset "utf-8";

/* ============================== */
/* 
	- Title: Diploma Landing Page
	- Autor: Coralix Themes
*/
/* ============================== */



/* ------------------------------------------------------------------------------- */
/*  Import styles
/* ------------------------------------------------------------------------------- */

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700,600,400italic,300italic,300,700italic,800,800italic,600italic");
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,700");

@import url("animate.css");


/* ------------------------------------------------------------------------------- */
/*  Reset & Clearfix
/* ------------------------------------------------------------------------------- */

html,body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,a,img,small,sub,b,dl,dd,dt,ul,li,label,article,details,footer,header,menu,nav,input,textarea,select{
		background:transparent;
		border:0;
		outline:0;
		padding:0;
		margin:0;
}

.clearfix:after {
		clear: both;
		content: " ";
		display: block;
		font-size: 0;
		height: 0;
		line-height: 0;
		visibility: hidden;
		width: 0;
}	

ul li {
	list-style:none;
}

img {
	width: 100%;
}




/* ------------------------------------------------------------------------------- */
/*  General
/* ------------------------------------------------------------------------------- */	

html,body{
		background:#fff;
		color:#2d3e52;
		font-family: 'Open Sans', sans-serif;
		font-size: 80%;	
		height:100%;
		line-height: 1;
		width:100%;	
		outline: none;
}	

h1 { font-size: 2em; font-weight:400; line-height:2em; font-family: 'Montserrat', Helvetica, Arial, sans-serif; color:#fbaf41; }

h2 { font-size: 1.8em; font-weight:400; line-height:1.8em; 'Montserrat', Helvetica, Arial, sans-serif; color:#FEBE10; }

h3 { font-size: 1.7em; font-weight:600; line-height:3.5em; font-family: 'Open Sans', sans-serif; color:#FEBE10; }

h4 { font-size: 1.4em; font-weight:400; line-height:1.4em; font-family: 'Open Sans', sans-serif; color:#fbaf41; }

h5 { font-size: 1.2em; font-weight:400; line-height:1.3em; font-family: 'Open Sans', sans-serif; color:#fbaf41; }

h6 { font-size: 0.5em; font-weight:400; line-height:1em; font-family: 'Open Sans', sans-serif; color:#fbaf41; }

p { font-size: 1.4em; font-weight:400;  line-height:1.6em; font-family: 'Open Sans', sans-serif;  color: #9d9fa2 }

a, li, .btn, .space ul li i {
        text-decoration: none;
        outline: none;
        -webkit-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;
           -moz-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;
            -ms-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;
             -o-transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;
                transition: background-color .3s ease, border .3s ease, color .3s ease, opacity .3s ease-in-out, outline .3s ease;
}

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

a:focus, a:hover, a:focus, .btn:focus {
	outline: none;
}

label.no {
	display: none;
}

.generic {
	padding: 90px 30px;
}

.title {
	margin: 0 0 40px 0;
}

.title h1{
	color: #FEBE10;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 2.6em;
	letter-spacing: -1px;
	line-height: 1.3;
    text-align: center;
}

.title h2{
	color: #9d9fa2;
	font-weight: 400;
	font-size: 1.4em;
	letter-spacing: 1px;
	background: url("../img/line.gif") no-repeat scroll center 35px rgba(0, 0, 0, 0);
	padding-bottom: 15px;
}

.btn {
	background: #FEBE10;
	border-radius: 2px;
	color: #fff;
	border: none;
	font-size: 1.3em;
	margin-top: 20px;
	padding: 10px 22px;
}

.btn:hover {
	background: #2B2D35;
	color: #fff;
}

.btn-default:focus, .btn-default:active, .btn-default.active {
	background: #cbcbcb;
	color: #fff;
}

i {
	position: relative;
	top: 1px;
	display: inline-block;
	-webkit-font-smoothing: antialiased;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
}

/* ------------------------------------------------------------------------------- */
/*  Classes Table
/* ------------------------------------------------------------------------------- */

.classes .item {
	background: #fff;
	border: 1px solid #ebebeb;
	border-radius: 2px;
	margin-top: 90px;
	padding: 20px 30px;
	text-align: center;
}

.ch-item {
	width: 170px;
	height: 170px;
	border-radius: 50%;
	border: 7px solid #FEBE10;
	position: relative;
	cursor: default;
	display: block;
    margin: -90px auto 20px;
			
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

.ch-img-1 { 
	background-image: url(../img/1.5kw_system.png);
}

.ch-img-2 { 
	background-image: url(../img/3.0kw_system.png);
}

.ch-img-3 { 
	background-image: url(../img/5.0kw_system.png);
}

.ch-info {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	opacity: 0;
	
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
	
	-webkit-backface-visibility: hidden; /*for a smooth font */

}

.ch-info p a {
	font-family: 'Montserrat', sans-serif;
	display: block;
	color: #fff;
	font-style: normal;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 1.2em;
	letter-spacing: 1px;
	padding-top: 57px;
	text-align: center;
	line-height: 1;
}

.classes .item ul {
    margin: 0 0 17px;
    text-align: left;
}

.classes .item ul li{
    padding: 4% 0;
	font-size: 1.3em;
	color: #9d9fa2;
	border-bottom: 1px solid #ebebeb;
	line-height:1.7em;
}

.classes .item ul li:last-child{
    border-bottom: none;
}

.classes .item ul i{
    color: #2B2D35;
    margin-right: 4px;
    line-height:1.4em;
}

.classes .item:hover .ch-info {
	opacity: 1;
	
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);	
}

.classes .item:hover .ch-item {
	box-shadow: 
		inset 0 0 0 100px rgba(255,255,255, 0.7),
		inset 0 0 0 6px rgba(255,255,255, 0.9),
		0 1px 2px rgba(255,255,255, 0.1);
}

.classes .item:hover {
	background: #2B2D35;
	
}

.classes .item:hover ul li {
	color: #fff;
	border-bottom: 1px solid #b9bbc1;
	line-height:1.7em;
}

.classes .item:hover ul li i{
	color: #FEBE10;
	line-height:1.7em;
}



@media (max-width: 768px) {
	.solar-panel-prices #menu-classes .container {
		max-width: 750px !important;
	}
}