/* Theme Name: Alsakas Author: Alex AGEPCom Description: Minimal theme Version: 0.5 Tags: minimal alsakas Theme URI: https://alex.agepcom.fr/repository/themes/alsakas/ Author URI: https://alex.agepcom.fr/ */ /* -------------global --------------*/ html, .body-alsakas {background-color:black;margin:0px} a {text-decoration:none;cursor:pointer} * {font-family:Montserrat,Century Gothic, Helvetica, Arial, sans-serif;box-sizing:border-box;cursor:arrow} ul {-webkit-margin-before: 0em;-webkit-padding-start: 0px;-webkit-margin-after: 0em;} @font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot'); src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('fonts/icomoon.woff') format('woff'), url('fonts/icomoon.ttf') format('truetype'), url('fonts/icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal; } /* ------------- header & nav --------------*/ header {max-width:1024px;margin-left:auto;margin-right:auto;display:flex;flex-direction:row;align-items: center;align-content: center;justify-content: center;} header * {cursor:default;} #header {color:white;width:100%;text-align:center;position:relative;/*background-image:url(fond.png);background-repeat:repeat;*/background-color:rgba(0,0,0,1)} #header #header-logo {width:100px} #header #header-logo img.header-logo {margin:10px;width:100px;position:relative;margin-left:auto;margin-right:auto;} #header #header-logo img.header-default-logo {width:75px} #header #header-logo a.header-logo-a {height:auto;} #header #header-logo a.header-logo-a img.header-logo {/*opacity:0.8*/} #header #header-logo a.header-logo-a:hover img.header-logo {opacity:1;/*box-shadow:0px 0px 32px #8BFAFF;background-color:#8BFAFF;border-radius:20%*/} #header #header-title {width:calc(100% - 100px - 180px - 20px);padding-left:10px;padding-right:10px;} #header #header-sidebar h4.header-widget-title {font-size:12px;margin:0;padding-top:5px} #header #header-sidebar p.header-widget-content {font-size:12px;margin:0} #header #header-sidebar p.header-widget-content a {color:white;text-decoration:none} #header #header-sidebar p.header-widget-content a:hover {color:#A8F1FD} #header #header-description {font-weight: 100;letter-spacing: 2px;display:block;width:calc(100% - 100px - 180px - 20px);text-align:left;padding:5px 10px;font-size:12px} .header-widget-content .simplesend {max-width:150px;padding:5px} .header-widget-content .simplesend .unemail {background:black;color:white;width:100%;font-size:10px;border:1px solid black} .header-widget-content .simplesend .unmsg {background:black;color:white;width:100%;font-size:10px;border:1px solid black} .header-widget-content .simplesend .unemail:hover, .header-widget-content .simplesend .unmsg:hover {border:1px solid white} .header-widget-content .simplesend .sendbtn {margin-top:-5px;width:60px;display:block;float:left;clear:none;border:1px solid black;background:black;color:white;font-size:8px;padding-top:4px;} .header-widget-content .simplesend .sendbtn:hover {border:1px solid white;} .header-widget-content .simplesend .resultframe {margin-top:-1px;display:block;clear:none;width:calc(100% - 70px);height:15px;float:right;border:0px solid black;} /* #header #header-sidebar {color: white;font-size:12px;width:180px;height:104px;} #header #header-sidebar label {display:none;} #header #header-sidebar input#s {background-color:black;color:white;width:100px;padding:5px;border-radius:5px;border:1px solid black;} #header #header-sidebar form#searchform.searchform:hover input#s {border:1px solid grey} #header #header-sidebar input#searchsubmit {background-color:black;color:white;width:100px;font-size:10px;color:grey;padding:3px;border:0px solid grey;} #header #header-sidebar input#searchsubmit:hover {background-color:#393939;color:white;} */ #nav {background-color:#353535;height:54px} nav {max-width:1024px;margin-left:auto;margin-right:auto;color:white;height:auto;display:block;min-height:37px;} nav .menu-principal-container ul.main-menu {height:52px;text-align:center;margin:0;display:flex;flex-direction:row;align-items: center;align-content: center;justify-content: center;} nav .menu-principal-container ul.main-menu li {min-width:54px;height:52px;max-width:160px;width:calc(100%/7);font-size:14px;font-weight:300;text-transform:uppercase;text-align:center;display:inline-block;list-style-type:none;} nav .menu-principal-container ul.main-menu li a {transition: all 0.8s ease;color:white;width:100%;height:100%;min-width:100%;min-height:53px;text-decoration:none;padding:10px;box-sizing:border-box;display:flex;flex-direction:row;align-items: center;align-content: center;justify-content: center;} nav .menu-principal-container ul.main-menu li a:hover {background:linear-gradient(to bottom, #323232 0%,#000000 100%);text-shadow: -3px -3px 6px rgba(255,255,255,0.8);box-shadow: inset 2px 2px 6px rgba(0,0,0,0.5), inset -2px -2px 4px rgba(0,0,0,0.3) ;border-radius:12px 12px 0px 0px} @media screen and (max-width: 799px) { nav .menu-principal-container ul.main-menu li {width:calc(200% / 5)} } @media screen and (max-width: 480px) { #nav {height:auto} nav, #nav .menu-principal-container, #nav .menu-principal-container ul.main-menu, #nav .menu-principal-container ul.main-menu li {min-width:auto;box-sizing:border-box;width:100%;height:auto;position:relative;display:block} #nav .menu-principal-container ul.main-menu li {height:52px;} nav .menu-principal-container ul.main-menu li {float:none;display:block;margin-left:auto;margin-right:auto;} nav .menu-principal-container ul.main-menu li a {min-height:auto} #header #header-logo, #header #header-sidebar-container {clear:both;display:block;position:relative;margin-left:auto;margin-right:auto;} } .alsakas-breadcrumbs {color:#ffffff;padding-left:30px;padding-right:30px;font-size:14px} .alsakas-breadcrumbs a {color:#ffffff;text-decoration:none} .alsakas-breadcrumbs a:hover {color:#ffffff;text-decoration:underline} .alsakas-breadcrumbs a:visited {color:#ffffff} /* ------------- main content - pages --------------*/ /* a mettre en modeles de pages */ #main {background-color:#eaeaea;color:black} #main .content {font-size:14px;font-weight:200;color:#565656;padding:10px 20px 20px 20px;display:block;} #main .content-grid {max-width:1024px;margin-left:auto;margin-right:auto;} #main .content-full {max-width:100%} #main .content:hover {color:black} #main .content h1 {color:#B0B0B0;text-transform:uppercase;font-weight:100;margin-top:10px} #main .content a {color:#5C98D7;font-weight:400;text-decoration:none;} #main .content:hover a {text-decoration:underline;} #main .content a:hover {color:#DB7402;color:black;text-decoration:none;/*background-color:#A8F1FD*/} .darkbody {background-color:black;color:#E0E0E0} .darkbody #main {background-color:black;color:white} .darkbody #main .content {color:white} .darkbody .content:hover {color:white} .darkbody #main .content a:hover {color:white} .single-post #main {display: flex;flex-direction: row;align-content:center;justify-content:space-evenly;align-items:flex-start;background:white;} .single-post #main .content {color:black;max-width:1024px;text-align:justify;padding:0px 40px 40px 0px} .single-post #main .content:hover {color:black} .single-post #main .sidebar-left {background-color:white;width:200px;padding:10px 40px 10px 10px} .single-post #main .content-single-post {width:calc(100% - 200px);} .single-post #main .sidebar-left aside {font-size:12px;color:white;padding-top:15px;} .single-post #main .sidebar-left h2.footer-widget-title {font-size:16px;font-weight:300;margin:0px;padding:10px;color:white;margin-bottom: 8px;} .single-post #main .sidebar-left .custom-html-widget {padding:10px;font-weight:100;} .single-post #main .sidebar-left a {color:black;font-weight:300} .single-post #main .sidebar-left a:hover {text-decoration:underline} .single-post #main .sidebar-left .custom-html-widget a:hover {color:#A8F1FD} .single-post #main .sidebar-left input {max-width:100%} .single-post.darkbody #main {background:black;color:white} .single-post.darkbody #main .content {color:white;max-width:1024px;text-align:justify;padding:0px 40px 40px 0px} .single-post.darkbody #main .content:hover {color:white} .single-post.darkbody .sidebar-left {background-color:white;width:200px;} .single-post.darkbody .content-single-post {width:calc(100% - 200px);} .single-post.darkbody #main .sidebar-left {background-color:black} .single-post.darkbody #main .sidebar-left aside {background-color:black;font-size:12px;color:black;padding-top:15px;} .single-post.darkbody #main .sidebar-left h2.footer-widget-title {font-size:16px;font-weight:300;margin:0px;padding:10px;color:white;margin-bottom: 8px;} .single-post.darkbody #main .sidebar-left .custom-html-widget {padding:10px;font-weight:100;} .single-post.darkbody #main .sidebar-left a {color:white;font-weight:300} .single-post.darkbody #main .sidebar-left .custom-html-widget a:hover {color:#A8F1FD} /* ------------- footer --------------*/ #footer {border-top:1px solid #414141;background-color:black;color:white;padding:10px 0px;} footer {max-width:1024px;margin-left:auto;margin-right:auto;} #footer h2.footer-widget-title {margin:0px;font-size:12px;font-weight:400px} footer .footer-5col {font-size:12px;font-weight:200;box-sizing:border-box;width:calc(100%/5);padding:10px;display:block;clear:none;float:left;} footer .footer-5col a {color:#D9D9D9;text-decoration:none} footer .footer-5col a:hover {color:white;/*text-decoration:underline*/;color:#A8F1FD} footer .footer-5col li {list-style-type:none;} footer #footer-col1 {font-size:12px;} footer #footer-col2 {} footer #footer-col3 {} footer #footer-col4 {} footer #footer-col5 {} footer .footer-social {transition: background-color 0.5s ease;color:white;box-sizing:border-box;border-radius:50%;width:30px;height:30px;display:block;clear:none;float:left;margin-right:10px;margin-bottom:5px;} footer .footer-social a {font-size:12px;font-family: icomoon!important;width:100%;height:100%;display:inline-block;text-align:center;padding-top:8px;text-decoration:none;color:white;} footer .footer-social:hover {background-color:grey!important;} footer #footer-social-facebook {background-color:#3b5998;} footer #footer-social-youtube {background-color:#FF0000;} footer #footer-social-linkedin {background-color:#0077b5;} footer #footer-social-facebook a:before {content: "\e604";} footer #footer-social-youtube a:before {content: "\f0da";font-size:18px;line-height:12px;padding-left:2px} footer #footer-social-linkedin a:before {content: "\e60f";} .footerdegrade { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#353535+0,000000+100 */ background: #353535; /* Old browsers */ background: -moz-linear-gradient(top, #353535 0%, #000000 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #353535 0%,#000000 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #353535 0%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ } .headerdegrade { border-top:1px solid #353535; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,353535+100 */ background: #000000; /* Old browsers */ background: -moz-linear-gradient(top, #000000 0%, #353535 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #000000 0%,#353535 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #000000 0%,#353535 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#353535',GradientType=0 ); /* IE6-9 */ } /* ------------- sidebar --------------*/ #sidebar {background-color:orange;color:white;display:none} /* ------------- search results --------------*/ .search-results {display:block;clear:both;margin-bottom:30px;height:auto;} .search-result {border-top:2px solid #D9D9D9;width:100%;display:inline-block;padding:10px} .search-result div, .search-results-th div {float:left;clear:none;display:block} .new-search {display:block;clear:both;margin-top:30px;margin-bottom:30px} .search-post-title {width:33%} .search-post-excerpt {width:66%} .index-archive-posts {display:block;clear:both;margin-bottom:30px;height:auto;} .index-archive-post {border-top:2px solid #D9D9D9;width:100%;display:block;padding:10px} .index-archive-post h1 {font-size:16px;margin:0px;position:relative;margin-left:40px;} .index-archive-post h1:before {content:"";position:absolute;top:5px;left:-40px;width:30px;height:30px;margin-right:10px;background-color:#D9D9D9;display:inline-block;border-radius:50%} .index-archive-post h1 a {text-decoration:none!important} .index-archive-post:hover h1 a {text-decoration:underline!important} .index-archive-post:hover h1:before {background-color:#8FABFF} .index-archive-title {} .index-archive-date {margin-left:40px;font-size:12px;font-weight:400;display:block;clear:both} .index-archive-content {margin-left:40px;font-size:12px;display:block;clear:both} /*-------various elements ------*/ #main blockquote {background:rgba(222, 222, 222, 0.5);color:rgb(65, 65, 65);padding: 5px 10px;} .darkbody blockquote {background:rgba(65, 65, 65, 0.8);color:rgba(241, 243, 240, 1);padding: 5px 10px;} #main blockquote, .darkbody blockquote, #main blockquote *, .darkbody blockquote * {font-family:Monaco,Courier,monospace!important;margin:0;text-align:left} button.darkmodeswitcher {display:block;background:black;color:white;width:100px;margin:auto;margin-bottom:10px;border:0;border-radius:10px;} button.darkmodeswitcher:hover {background:white;color:black} /* ------------- miscellanous classes --------------*/ /*Neon Logo */ #header #header-title h1.someh1 {transition: all ease-in 0.5s;text-align:left;margin:0px;max-width:500px;padding:10px;font-family:Helvetica Neue, Helvetica, arial;font-weight:700;font-size:30px;text-decoration:none} #header #header-title .neon {text-shadow: 0 0 5px #A8F1FD, 0 0 10px #A8F1FD, 0 0 20px #A8F1FD, 0 0 40px #A8F1FD; color:white;/*background:black*/;letter-spacing:-1px;} #header #header-title .neon:hover {text-shadow: 0 0 5px #82F9A6, 0 0 10px #82F9A6, 0 0 20px #82F9A6, 0 0 40px #82F9A6;} #main .content h1.h1a {color:#B0B0B0} #main .content h1.h1b {color:white;letter-spacing: -1px;text-shadow: -3px 0px 6px rgba(0,0,0,0.2), 0px -3px 6px rgba(0,0,0,0.2), 3px 0px 6px rgba(0,0,0,0.2), 0px 3px 6px rgba(0,0,0,0.2);} /* ------------- responsive ------------ */ @media screen and (max-width:480px) { header {flex-direction:column} #header #header-title {width:90%;margin:auto} #header #header-title h1.someh1 {text-align:center} #header-sidebar {margin-bottom:15px} .single-post #main {flex-direction:column;align-items:center} .single-post #main .content-single-post {order:1;width:100%;padding:40px 40px 40px 40px} .single-post #main .sidebar-left {order:2;width:100%;padding:40px} footer .footer-5col {width:100%;margin:auto;clear:both;float:left;padding:10px 25px} } /*-----animations-----*/ @keyframes fadein { 0% { opacity:0; } 100% { opacity:1; } } @keyframes fromleft { 0% { transform: translateX(+100vw); opacity:1; } 50% { transform: translateX(+100vw); opacity:1; } 100% { transform: translateX(0vw); opacity:1; } } #main {transform: translateX(0vw);opacity:1;animation: 1s ease-out 0s 1 fromleft;} body.home header {opacity:1;animation: 2s ease-out 0s 1 fadein;} body.home .headerdegrade#nav {opacity:1;animation: 4s ease-out 0s 1 fadein;} body.home #footer {opacity:1;animation: 3s ease-out 0s 1 fadein;} body.home #main {transform: translateX(0vw);opacity:1;animation: 2s ease-out 0s 1 fromleft;} /* ------------- beautiful things to get from --------------*/ #main .content .mybody {padding:100px;background:#eaeaea;font-family:Helvetica Neue, Helvetica, arial;font-size:16px} #main .content .somea {color:#5C98D7;margin:15px;text-decoration:none!important;transition: all ease-in 0.5s; margin-bottom:10px;width:200px;height:40px;display:inline-block;background:white;font-size:20px;font-family:Helvetica Neue, Helvetica, arial;display:flex;align-items:center;justify-content:center} #main .content .somea:hover {text-decoration:none;transition: all ease-in 0.5s;} #main .content .defautbouton {font-size:18px;font-weight:100;color:#5C98D7;margin:15px;text-decoration:none!important;transition: all ease-in 0.5s; margin-bottom:10px;width:200px;height:40px;display:inline-block;background:white;font-size:20px;font-family:Helvetica Neue, Helvetica, arial;display:flex;align-items:center;justify-content:center} #main .content .defautbouton:hover {text-decoration:none;color:#5C98D7;background:white;transition: all ease-in 0.5s;box-shadow: 2px 2px 4px rgba(0,0,0,0.4),0px 0px 16px rgba(0,0,0,0.2);} #main .content p.boutons {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;flex-direction:row} .maj {text-transform:uppercase} #main .content .bouton1 {font-size:22px;background:darkgray;color:white!important;font-weight:100;text-shadow:0px 0px 8px black;border-radius:4px;} #main .content .bouton2 {font-size:18px;font-weight:200;letter-spacing:-0.2px;background:lightgray;color:white!important;text-shadow:0px 0px 8px #6D0019;border:1px solid #8f0222;} #main .content .bouton3 {font-size:18px;font-weight:300;background:slategray;border-radius:6px;color:black;text-shadow:0px 0px 8px white;border:1px solid #ADADAD} #main .content .bouton3:hover {text-shadow:0px 0px 8px white;border:1px solid #d1d1d1} #main .content .bouton4 {font-size:16px;border-radius:4px;color:white!important;font-weight:400;text-shadow:2px 2px 4px #1A83ED} #main .content .bouton5 {font-size:14px;color:#AA4F00!important;text-shadow:-1px -1px 3px #f7de00} #main .content .bouton6 {font-size:18px;color:white!important;border-radius:20px;text-shadow:0px 0px 13px #FF49F5;font-weight:700} #main .content .bouton7 {font-size:18px;letter-spacing:0.8px;color:#386012!important;font-weight:300} #main .content .degrade1 { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4c4c4c+0,515151+9,333333+100 */ background: #4c4c4c; /* Old browsers */ background: -moz-linear-gradient(top, #4c4c4c 0%, #515151 9%, #333333 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #4c4c4c 0%,#515151 9%,#333333 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #4c4c4c 0%,#515151 9%,#333333 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#333333',GradientType=0 ); /* IE6-9 */ } #main .content .degrade1:hover { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#333333+0,515151+91,4c4c4c+100 */ background: #333333; /* Old browsers */ background: -moz-linear-gradient(top, #333333 0%, #515151 91%, #4c4c4c 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #333333 0%,#515151 91%,#4c4c4c 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #333333 0%,#515151 91%,#4c4c4c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#4c4c4c',GradientType=0 ); /* IE6-9 */ } #main .content .degrade2 { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b20323+1,b20323+21,b20323+21,8f0222+67,6d0019+100 */ background: #b20323; /* Old browsers */ background: -moz-linear-gradient(top, #b20323 1%, #b20323 21%, #b20323 21%, #8f0222 67%, #6d0019 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #b20323 1%,#b20323 21%,#b20323 21%,#8f0222 67%,#6d0019 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #b20323 1%,#b20323 21%,#b20323 21%,#8f0222 67%,#6d0019 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b20323', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */ } #main .content .degrade2:hover { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b20323+1,8f0222+41,6d0019+100 */ background: #b20323; /* Old browsers */ background: -moz-linear-gradient(top, #b20323 1%, #8f0222 41%, #6d0019 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #b20323 1%,#8f0222 41%,#6d0019 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #b20323 1%,#8f0222 41%,#6d0019 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b20323', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */ } #main .content .degrade3 { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d1d1d1+1,dbdbdb+52,d1d1d1+100 */ background: #d1d1d1; /* Old browsers */ background: -moz-linear-gradient(top, #d1d1d1 1%, #dbdbdb 52%, #d1d1d1 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #d1d1d1 1%,#dbdbdb 52%,#d1d1d1 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #d1d1d1 1%,#dbdbdb 52%,#d1d1d1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d1d1', endColorstr='#d1d1d1',GradientType=0 ); /* IE6-9 */ } #main .content .degrade3:hover { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b2b2b2+1,bfbfbf+52,b2b2b2+100 */ background: #b2b2b2; /* Old browsers */ background: -moz-linear-gradient(top, #b2b2b2 1%, #bfbfbf 52%, #b2b2b2 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #b2b2b2 1%,#bfbfbf 52%,#b2b2b2 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #b2b2b2 1%,#bfbfbf 52%,#b2b2b2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2b2b2', endColorstr='#b2b2b2',GradientType=0 ); /* IE6-9 */ } #main .content .degrade4 { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7abcff+0,60abf8+44,4096ee+100;Blue+3D+%2314 */ background: #7abcff; /* Old browsers */ background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #7abcff 0%,#60abf8 44%,#4096ee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */ } #main .content .degrade4:hover { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#56aaff+0,60abf8+44,1a83ed+100 */ background: #56aaff; /* Old browsers */ background: -moz-linear-gradient(top, #56aaff 0%, #60abf8 44%, #1a83ed 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #56aaff 0%,#60abf8 44%,#1a83ed 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #56aaff 0%,#60abf8 44%,#1a83ed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#56aaff', endColorstr='#1a83ed',GradientType=0 ); /* IE6-9 */ } #main .content .degrade5 { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcd055+0,f7de00+100 */ background: #fcd055; /* Old browsers */ background: -moz-linear-gradient(top, #fcd055 0%, #f7de00 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #fcd055 0%,#f7de00 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #fcd055 0%,#f7de00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcd055', endColorstr='#f7de00',GradientType=0 ); /* IE6-9 */ } #main .content .degrade5:hover { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f7b654+1,ef9300+100 */ background: #f7b654; /* Old browsers */ background: -moz-linear-gradient(top, #f7b654 1%, #ef9300 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #f7b654 1%,#ef9300 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #f7b654 1%,#ef9300 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7b654', endColorstr='#ef9300',GradientType=0 ); /* IE6-9 */ } #main .content .degrade6 { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffc6f8+0,ea81e8+100 */ background: #ffc6f8; /* Old browsers */ background: -moz-linear-gradient(top, #ffc6f8 0%, #ea81e8 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #ffc6f8 0%,#ea81e8 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #ffc6f8 0%,#ea81e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc6f8', endColorstr='#ea81e8',GradientType=0 ); /* IE6-9 */ } #main .content .degrade6:hover { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffddfa+0,ffa0fb+100 */ background: #ffddfa; /* Old browsers */ background: -moz-linear-gradient(top, #ffddfa 0%, #ffa0fb 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #ffddfa 0%,#ffa0fb 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #ffddfa 0%,#ffa0fb 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffddfa', endColorstr='#ffa0fb',GradientType=0 ); /* IE6-9 */ } #main .content .degrade7 { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b6e026+0,abdc28+100;Green+Flat */ background: #b6e026; /* Old browsers */ background: -moz-linear-gradient(top, #b6e026 0%, #abdc28 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #b6e026 0%,#abdc28 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #b6e026 0%,#abdc28 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b6e026', endColorstr='#abdc28',GradientType=0 ); /* IE6-9 */ } #main .content .degrade7:hover { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#a8d123+0,85c926+100 */ background: #a8d123; /* Old browsers */ background: -moz-linear-gradient(top, #a8d123 0%, #85c926 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #a8d123 0%,#85c926 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #a8d123 0%,#85c926 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8d123', endColorstr='#85c926',GradientType=0 ); /* IE6-9 */ } #main .content .d3d {;color: #FEF5DB;letter-spacing:2px; text-shadow: 0 13.36px 8.896px #c4b59d,0 -2px 1px #fff, 1px 1px 4px #C79C20;font-weight:300; } #main .content .d3d:hover {color:white} #main .content .d4d {color:#E3E3E3;background:#6C6C6C;letter-spacing:2px; text-shadow: 0 1px 0 #ccc, 0 2px 0 #6C6C6C, 0 4px 0 black, 0 2px 0 #b9b9b9, 0 3px 0 #aaa, 0 4px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); } #main .content .d4d:hover {background:#303030;color:white} #main .content .outset {background:#C6C6C4;color:#E6E5E5;letter-spacing:-1px; text-shadow: -3px 0px 6px rgba(0,0,0,0.2), 0px -3px 6px rgba(0,0,0,0.2), 3px 0px 6px rgba(0,0,0,0.2), 0px 3px 6px rgba(0,0,0,0.2); } #main .content .outset:hover {color:white} #main .content .vr {color:white;letter-spacing:-1px; text-shadow: -1px -1px 2px cyan, 1px 1px 2px red; } #main .content .vr:hover {color:white;text-shadow: -1px -1px 2px red, 1px 1px 2px cyan; } #main .content .somediv {position:relative;transition: all ease-in 0.5s;margin:60px;width:200px;height:100px;background:white;display:flex;align-items:center;justify-content:center} #main .content .somediv:hover {/*background:#eaeaea;*/} #main .content .div1 {box-shadow:4px 4px 2px rgba(0,0,0,0.1), 0px 0px 32px rgba(0,0,0,0.3);background:white} #main .content .div2 {box-shadow: 0px 0px 32px rgba(255,255,255,0.5), 0px 0px 16px rgba(255,255,255,0.5), inset 0px 0px 16px rgba(255,255,255,0.5);background:#F2F3F2;border-radius:50px} #main .content .div3 {box-shadow: 0px 0px 32px rgba(0,0,0,0.5);background:white;color:black} #main .content .div4 {box-shadow: 0px 0px 32px rgba(255,255,255,0.5), 0px 0px 16px rgba(255,255,255,0.5);background:white} .darkbody .content .div4 {color:#565656} .darkbody .content:hover .div4 {color:black}