equation-admin-template/ltr/assets/css/elements/weather-app/style.css

Booststrap 4 admin template made by equation

.clear{clear:both;}/* clear float */

.main-info {
    width: 50%;
    margin: 5em auto;
    background: #3232b7; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* For Firefox 3.6 to 15 */
    background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 2em;
    border-radius: 5px;
}
.weather-grids {
    float: left;
    width: 33%;
}
.weather-grids.weather-mdl { text-align: center; }
.weather-grids:nth-child(3) { text-align: right; }
.weather-grids h3 {
    font-size: 1.5em;
    color: #fff;
    font-weight: 100;
}
.weather-grids h3.fri {
    color: #fff056;
    margin-top: 0.7em;
    line-height: 1.4;
}
.weather-grids h2 {
    font-size: 3em;
    font-weight: 300;
    color: #fff;
}
.weather-grids h4 {
    font-size: 1em;
    color: #fff;
}
.weather-bottom {
    text-align: center;
    margin-top: 2em;
}
.weather-bottom ul { padding-left: 0px; }
.weather-bottom ul li {
    display: inline-block;
    padding: 1em 0;
    float: left;
    width: 14%;
}
.weather-bottom ul li.bg{ background: #314277; }
.weather-bottom h4 {
    font-size: 1em;
    color: #fff;
    font-weight: 100;
}
figure.icons { margin: 0.5em 0; }
.weather-bottom h5 {
    font-size: 1.2em;
    color: #fff;
    font-weight: 600;
}
.weather-bottom h6 {
    font-size: 1em;
    color: #FFD700;
    margin-top: 0.5em;
}

/*---- responsive-design -----*/
@media(max-width:900px){
    .main-info { width: 100%; }
}

@media(max-width:480px) {
    .main-info { width: 100%; margin: 3em auto; }
    .weather-grids h3 { font-size: 1.3em; }
    .weather-grids h2 { font-size: 2.5em; }
    .weather-grids h4 { font-size: 0.8em; }
    .weather-bottom h5 { font-size: 1.1em; }
    .weather-bottom h6 { font-size: 0.9em; }
    .main { padding: 3em 0 0; }
}
@media(max-width:414px) {
    .main-info { padding: 1.5em 1em; }
    .weather-bottom h4 { font-size: 0.9em; }
    canvas#clear-day {
        width: 60px;
        height: 60px;
    }
    .weather-bottom canvas {
        width: 30px;
        height: 30px;
    }
    .weather-bottom { margin-top: 1.5em; }
}
@media(max-width:320px) {
    .main-info {
        width: 100%;
        margin: 1.5em auto;
        padding: 0.5em;
    }
    .weather-grids h2 { font-size: 2em; }
    .weather-grids h4 { font-size: 0.7em; }
    .weather-grids h3 { font-size: 0.9em; }
    canvas#clear-day {
        width: 55px;
        height: 55px;
    }
    .weather-bottom canvas {
        width: 20px;
        height: 20px;
    }
    .weather-bottom ul li {
        width: 14.2%;
    	padding: 0.5em 0;
    }
    .weather-bottom h5 { font-size: 0.9em; }
    .weather-bottom h6 { font-size: 0.8em; }
}
/*--//responsive-design---*/

/*-- main --*/
.main h1 {
    font-size: 1.2em;
    color: #ee3d50;
    text-align: right;
    margin-right: 2em;
}
.main-agileits{ padding: 2em 0 0; }
.main-wthree-row {
    width: 36%;
    margin: 2em auto;
    background: rgb(255, 255, 255);
    background-size: cover; 
    padding: 0em;
} 
.date {
    font-size: 1.4em;
    color: #fff;
    font-weight: 400;
    line-height: 1.8em;
}
/*-- agileinfo-text --*/
.agileinfo-text {
    text-align: center;
}
.agileinfo-text h3 {
    font-size: 2em;
    color: #fff;
}
.agileinfo-text h5 {
    font-size: 0.9em;
    color: #ececec;
    font-weight: 100;
    margin-top: 0.5em;
}
.agileinfo-text h2 {
    font-size: 8em;
    font-weight: 900;
    color: #ffbb44; 
}
.agileinfo-text h2 span {
    font-weight: 100;
    font-size: 0.5em;
    vertical-align: text-top;
}
.agileinfo-text h4 {
    font-size: 2em;
    color: #fff;
    letter-spacing: 3px;
}
.agileinfo-text h6 {
    font-size: .9em;
    color: #fff;
    font-weight: 300;
    letter-spacing: 1px;
    margin-top: 1em;
}
.w3layouts-slider { 
    width: 70%;
    margin: 3em auto 0;
}
.item.agile-item {
    text-align: center;
}
.agile-item h6 {
    font-size: 0.9em;
    color: #fff;
    font-weight: 300;
}
/*-- //agileinfo-text --*/
/*--//main--*/

/*-- responsive-design --*/
@media(max-width:1440px){
    .main-wthree-row { width: 27%; }
} 
@media(max-width:1280px){
    .main-wthree-row { width: 31%; }
}
@media(max-width:1080px){
    .main-wthree-row { width: 35%; }
} 
@media(max-width:991px){
    .main-agileits { padding: 2em 0 0; }
    .agileinfo-text h2 { font-size: 7em; }
    .main-wthree-row { width: 40%; }
} 
@media(max-width:768px){
    .copy-rights {  padding: 1em 0 2em; }
    .w3layouts-slider { margin: 2em auto 0; }
}
@media(max-width:667px){
    .main-wthree-row { width: 50%; }
}
@media(max-width:600px){
    .main-agileits { padding: 1.5em 0 0; }
} 
@media(max-width:480px){
    .main-wthree-row { width: 57%; }
    .date { font-size: 1.2em;  }
    .w3layouts-slider { width: 75%; } 
}
@media(max-width:414px){
    .agileinfo-text h2 { font-size: 6em; }
    .agileinfo-text h4 {
        font-size: 1.8em; 
        letter-spacing: 1px;
    }
    .w3layouts-slider { width: 85%; }
    .main-wthree-row { padding: 1.5em; }
    .copy-rights p { font-size: 0.9em;  padding: 0 1em; }
}
@media(max-width:384px){
    .main-wthree-row { width: 70%; }
} 
@media(max-width:320px){
    .main-wthree-row {
        width: 75%;
        padding: 0em;
    }
    .agileinfo-text h2 { font-size: 5em; }
    .agileinfo-text h4 { font-size: 1.4em;  }
    .w3layouts-slider { width: 90%; }
}


/*-- //responsive-design --*/

/*-- agileits-top --*/
.agileits-top {
    background-size: cover;
    min-height: 310px;
    background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
} 
.agileinfo-top-row{
    position:relative; 
    padding:0 3em;
}
.agileinfo-top-img span {
    background: url(images/5.png) no-repeat 0px 0px;
    display: block;
    height: 139px;
    width: 150px;
    position: absolute;
    top: -15%;
    left: -1%;
}
.agileinfo-top-row h3 {
    font-size: 4em;
    color: #fff056;
    padding-top: 0.2em;
    text-align: right;
}
.agileinfo-top-row h3 span{
    font-size: .5em;
    color: #fff;
}
.agileinfo-top-row p {
    margin: 0;
    color: #fff;
    font-size: 1.5em;
    text-align: right;
    font-weight: 600;
} 
.agileinfo-top-time { padding: 2.5em 0 0; }
div#txt {
    color: #fff;
    font-size: 2em;
    font-weight: 200;
    letter-spacing: 3px;
}
/*-- //agileits-top --*/
.w3ls-bottom {
    background: url(images/a.png)no-repeat -1px 0px;
    background-size: 103%;
    padding: 3em 1em 0;
    margin-top: -4em;
}
.biseller-column p {
    font-size: 0.9em;
    color: #999;
    font-weight: 400;
}
.main a.lightbox { display: block; } 
.biseller-column:hover p { color: #00bbb4; }
/*-- carousel --*/ 
#owl-demo2 .item {
    padding: 15px 0px;
    margin: 1em 1em;
    color: #FFF;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    text-align: center;
}
.customNavigation{ text-align: center; }
/*-- //carousel --*/
.w3ls-bottom2 { padding: 0 2em 2em; }
.wthree-grids ul {
    padding: 0.8em 0 0;
    border-top: 1px dashed #e9ecef;
}
.wthree-grids ul.top {
    border: none;
}
.wthree-grids ul li {
    display: inline-block;
    float: left;
    width: 32%;
    line-height: 2em;
    font-size: .9em;
    color: #3862f5;
}
.wthree-grids ul li.wthree-img {
    text-align: center; 
}
.wthree-grids ul li.wthree-img img {
    width: 35px;
    height: 35px;
    margin-top: -3px;
    font-size: 32px;
}
.wthree-grids ul li.wthree-temp {
    width: 17%;
    text-align: right;
}
/*-- weak-accordion --*/
.ac-container label {
    padding-right: 40px;
    position: relative;
    z-index: 20;
    display: inline-block;
    cursor: pointer;
    color: #3232b7;
    line-height: 33px;
    font-size: 1em;
    font-weight: 600;
}
.ac-container label:hover { color: #e95f2b; }
.ac-container input:checked + label,
.ac-container input:checked + label:hover{ color: #e95f2b; }
.ac-container label:after, .ac-container input:checked + label:hover:after {
    content: '';
    position: absolute;
    width: 15px;
    height: 11px;
    right: 13px;
    top: 15px;
    background: url(images/arrow_up.png) no-repeat -4px -5px; 
    -webkit-transition: .5s all;
    -moz-transition: .5s all;
    -o-transition: .5s all;
    -ms-transition: .5s all;
	transition: .5s all;
}
.ac-container input:checked + label:hover:after ,.ac-container input:checked + label:after{
    color: #000;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    top: 10px;
}
.ac-container input{
	display: none;
}
.ac-container article{
    background:#fff;
    margin-top: -1px;
    overflow: hidden;
    height: 0px;
    position: relative;
    z-index: 10;
    -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container article p {
    line-height: 21px;
    font-size: 0.9em;
    padding: 10px 24px;
    color: #FFFFFF;
    background-color: #FF7FE5;
}
.ac-container input:checked ~ article{
    -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    background-color: #E259C6;
}
.ac-container input:checked ~ article.ac-small {
    height: 20.5em;
    background: #fff; 
}
/*-- //weak-accordion --*/
/*-- //main --*/

/*-- responsive-design --*/ 
@media(max-width:1280px){
.main-wthree-row {
    width: 36%;
}
#owl-demo .item { 
    margin: 1em 1em 0.5em; 
}
.agileits-top { 
    min-height: 290px;
}
.agileinfo-top-time {
    padding: 1.5em 0 0;
}
}
@media(max-width:1024px){
.main-wthree-row {
    width: 46%;
}
.agileinfo-top-row { 
    padding: 0 2em;
} 
} 
@media(max-width:900px){
.w3ls-bottom2 {
    padding: 0 1.5em 1.5em;
}
.agileinfo-top-row h3 {
    font-size: 3.5em; 
}
.agileinfo-top-row p { 
    font-size: 1.3em; 
}
.agileits-top {
    min-height: 275px;
}
div#txt { 
    font-size: 1.8em; 
}
.w3ls-bottom { 
    padding: 3em 1em 0 0.5em; 
}
.main h2 { 
    margin-right: 1em; 
}
.agileinfo-top-img span {  
    height: 120px;
    width: 130px; 
    top: -19%;
    left: -2%;
    background-size: 100%;
}
.main {
    padding: 1.5em 0 0;
}
.main-wthree-row {
    width: 90%;
    margin: 3em auto 2em;
}
}
@media(max-width:800px){
.main-wthree-row {
    width: 90%; 
}
.ac-container input:checked ~ article.ac-small {
    height: 20em; 
}
}
@media(max-width:768px){
.agileinfo-top-img span {
    height: 99px;
    width: 108px;
    top: -17%;
    left: -1%; 
}
.agileinfo-top-row h3 {
    font-size: 3em;
}
.agileinfo-top-row p {
    font-size: 1em;
}
.agileits-top {
    min-height: 240px;
}
.w3ls-bottom {
    padding: 2em 1em 0 0.5em;
}
}
@media(max-width:736px){
div#txt {
    font-size: 1.6em;
}
}
@media(max-width:667px){
.main-wthree-row {
    width: 90%;
}
}
@media(max-width:640px){
.main-wthree-row {
    width: 90%;
}
}
@media(max-width:568px){ 
.main-wthree-row {
    width: 90%;
}
} 
@media(max-width:480px){
.main-wthree-row {
    width: 90%;
}
.main h2 {
    margin-right: 0.5em;
    font-size: 1.1em;
}
.agileinfo-top-row h3 {
    font-size: 2.5em;
}
.agileinfo-top-row p {
    font-size: 0.9em;
}
.w3ls-bottom2 {
    padding: 0 1.2em 1em;
} 
#owl-demo2 .item {
    margin: 1em 1em 0;
}
}
@media(max-width:414px){
.main {
    padding: 1em 0 0;
}
.main-wthree-row {
    width: 100%;
    margin: 2em auto 1em;
}
.agileinfo-top-row h3 {
    font-size: 2.2em;
}
.agileinfo-top-img span {
    height: 83px;
    width: 90px; 
    left: 0%;
}
.agileits-top {
    min-height: 220px;
}
div#txt {
    font-size: 1.5em;
} 
.wthree-grids ul li.wthree-img img {
    width: 30px;
    height: 29px;
    margin-top: 1px;
}
.wthree-grids ul {
    padding: 0.6em 0 0; 
}
.ac-container input:checked ~ article.ac-small {
    height: 18.2em;
}
.w3ls-bottom {
    padding: 3em 1em 0 0.5em;
} 
#owl-demo2 .item {
    margin: 0.5em 1em;
}
}
@media(max-width:384px){
.agileinfo-top-img span { 
    top: -14%;
}
.biseller-column p {
    font-size: 0.85em; 
}
#owl-demo2 .item {
    margin: 0 1em;
}
.w3ls-bottom {
    padding: 2.2em 1em 0 0.5em;
}
.ac-container label { 
    font-size: 0.9em; 
}
} 
@media(max-width:320px){
.agileinfo-top-img span {
    height: 70px;
    width: 75px;
    left: 0%;
}
.agileinfo-top-row h3 {
    font-size: 1.8em;
}
.agileinfo-top-row p {
    font-size: 0.85em;
}
.agileinfo-top-row {
    padding: 0 1.5em;
}
div#txt {
    font-size: 1.3em;
}
.agileits-top {
    min-height: 175px;
}
.w3ls-bottom { 
    margin-top: -2em;
}
.w3ls-bottom2 {
    padding: 0 1em 1em;
}
.main h2 {
    margin-right: 0;
    font-size: 1em;
}
}
/*-- //responsive-design --*/