/*
Theme Name: droidtale
Version: 1.3.0
License: 
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: white, light, yellow, two-columns, fluid-layout, custom-background, custom-colors, featured-images, theme-options
Text Domain: droidtale
*/

/*------------------------------------------------------------------
[Table of contents]

1. Initiate Css
	1. Reset
	2. Wordpress Style ( caption / align style )
2. Theme Style
	1. Header
	2. Sidebar
	3. Footer
3.) Content Item
4.) Widget
5.) Default Plugin
6.) 10335 Soccer Plugin 
-------------------------------------------------------------------*/

/*--- reset ---*/
/*--- reset5 © 2011 opensource.736cs.com MIT ---*/
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,
pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,
s,samp,small,strike,strong,sub,sup,tt,var,b,i,center,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,audio,canvas,details,figcaption,figure,footer,header,hgroup,
mark,menu,meter,nav,output,progress,section,summary,time,video{ border:0; outline:0; 
	vertical-align:baseline; background:transparent; margin:0;padding:0; }
nav ul{ list-style:none; }
ul{ list-style:disc; }
ul ul{ list-style:circle; }

/*--- clear ---*/
.clear{ display: block; clear: both; visibility: hidden; line-height: 0; height: 0; zoom: 1; }
.clear-fix{ zoom: 1; }
.clear-fix:after{ content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }


i{ margin-right: 5px; }
a{ text-decoration: none; }
p{ margin-bottom: 20px; }
ul, ol{ margin-bottom: 20px; margin-left: 30px; }
body { line-height: 1.7; font-family: Arial, Helvetica, sans-serif; overflow-y: scroll;
	-webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }	

/*----------------------------------------------------------------------*/
/*---------------             THEME STYLE             ------------------*/
/*----------------------------------------------------------------------*/

/*--- structure ---*/
.container{ padding: 0px; margin: 0px auto; /* position: relative; */ }
.column, .columns{ float: left; position: relative; min-height: 1px; }

/*--- header ---*/

.droidtale-header-wrapper{ z-index: 99; }
.droidtale-logo-container,
.droidtale-header-container{ position: relative; z-index: 97; }
.droidtale-logo{ float: left; margin-left: 0px; margin-right: 15px; }

.droidtale-navigation-gimmick{ position: absolute; bottom: 0px; height: 3px; }
.droidtale-navigation-wrapper{ margin: 0px 15px; float: right; }
.droidtale-navigation-wrapper .droidtale-navigation-container{ position: relative; line-height: 0; }
.droidtale-navigation-wrapper .droidtale-main-menu > li{ padding: 0px; }
.droidtale-navigation-wrapper .droidtale-main-menu > li > a{ font-size: 15px; padding: 0px 0px 45px 0px; 
	margin: 0px 23px 0px 0px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; }
.droidtale-navigation-wrapper .droidtale-main-menu > li:last-child > a,
.droidtale-navigation-wrapper .droidtale-main-menu > li:last-child > a.sf-with-ul,
.droidtale-navigation-wrapper .droidtale-main-menu > li:last-child > a.sf-with-ul-pre{ padding-right: 0px; }
.droidtale-navigation-wrapper .droidtale-main-menu > li > a.sf-with-ul-pre,
.droidtale-navigation-wrapper .droidtale-main-menu > li > a.sf-with-ul{ margin-right: 23px; }
.droidtale-navigation-wrapper .droidtale-main-menu > li > a.sf-with-ul:after{ top: 11px; right: 0px; display: none; }
.droidtale-donate-button { font-size: 13px; text-transform: uppercase; font-weight: bold;
	letter-spacing: 1px; width: 100px; margin-left: 30px; float: left; text-align: center; cursor: pointer; }
.droidtale-button-donate-text{ position: relative; }
.droidtale-button-overlay { width: 100px; display: block; position: absolute; top: 0px; bottom: 0px; 
	border-bottom-width: 3px; border-bottom-style: solid; }
body {overflow-x: hidden;background: rgb(83, 83, 83);}

/*======================== HOME ========================*/
.image-container {max-width: 100%;height: auto;position: relative;}
.image-container img {width: 100%;height: auto;position: fixed;top: 0px;left: 0px;}
img#bg_2 {width: 200%;height: auto;position: fixed;top: 30%;left: 0;}
img#bg_3 {width: 35%;height: auto;position: fixed;top: 15%;left: 35%;}
img#bg_4 {width: 200%;height: auto;position: fixed;top: 55%;left: 0;}
img#bg_5 {width: 200%;height: auto;position: fixed;top: 52%;left: 0;}
img#bg_6 {width: 100%;height: auto;position: fixed;top: 55%;left: 0;}
img#bg_a {width: 20%;height: auto;position: fixed;top: 20%;left: 0%;}
img#bg_b {width: 20%;height: auto;position: fixed;top: 20%;right: 0%;}
img#bg_a_2 {width: 20%;height: auto;position: fixed;top: 20%;left: 0%;}
img#bg_b_2 {width: 20%;height: auto;position: fixed;top: 20%;right: 0%;}
img#bg_8 {width: 120%;height: auto;position:absolute; top: 80%;left: 0;z-index: 9;}
img#bg_8_2 {width: 120%;height: auto;position:relative;left: 0;z-index: 9;}
.image_2 {position: fixed;transition: all 5s;clip-path: polygon(0 0%, 0% 500%, 150% 1000%, 0 1000%);z-index: 9;position: relative;opacity:0;}
.about{position: relative;display: flex;}
.animation {position: absolute;top: 65%;left: 0; z-index: 99;}
.toriel {position: absolute;top: 0%; left: 0;}
.asgore {position: absolute;top: 0%; left: 0;}
.animation_2 {position: absolute;top: 31.5%;left: 12.5%; z-index: 99;height: auto;}
.animation_3 {position: absolute;top: 20%;left: 75%;}
#canvas_check_sans {position: absolute;top: 15%;left: 3.5%;z-index: 9;}
#canvas_check {position: relative;z-index: 99;}
.canvas_3 {position: absolute;top: 0%;left: -10%; z-index: 99;}
section {min-height: 100vh;overflow: hidden;}
body{touch-action: pan-y;}

/*======================== TUTORIALS ========================*/
.tutoriels h2 {margin-bottom:4rem;}
.tutoriels-container {display:flex;gap:2.5rem;align-items:center;}
.tutoriels-box {display: flex;position: relative;border-radius: 2rem;box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);overflow: hidden;width: 100%;}
.tutoriels-box img {width: 100%;transition: 0.5s ease; overflow:hidden;}
.tutoriels-box:hover img {transform: scale(1.1);}
.tutoriels-layer {position: absolute;bottom: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(rgba(0, 0, 0, 0.1), rgb(27, 33, 90));color: #fff;display: flex;align-items: center;justify-content: center;flex-direction: column;text-align: center;padding: 0 0;opacity: 0;transition: 0.5s ease;}
.tutoriels-box:hover .tutoriels-layer {opacity: 1;}
.tutoriels-layer h4 {font-family: 'CustomFont';font-size: 2rem;color:#fbff00;}
.tutoriels-layer p {margin:0.3rem 0 1rem;}
.tutoriels-layer a {display:inline-flex;justify-content:center;align-items:center;width:3rem;height:3rem;background:#fff;border-radius:50%;}
.tutoriels-layer a i {font-size:1.6rem;}
.box_2 {text-align: center;display:none;}
.box_4 {text-align: center;display:none;}
.head {color: #fff;}
.ten {color: #fff;text-align: center;}
* {font-family: 'CustomFont';}

/*======================== SERVICES ========================*/
.services {background:#0c0c0c;position:relative;min-height:auto;padding: 5rem 5% 0rem;}
.services h2 {margin-bottom:2rem;}
.services .services-container {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:2rem;}
.services-container .services-box {flex:1 1 15rem;background:rgb(20, 20, 20);padding:3rem 2rem 1rem;border-radius:2rem;box-shadow:0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);text-align:center;border-top:0.6rem solid white;border-bottom:0.6rem solid white;transition:0.5s ease;}
.services-container .services-box:hover {box-shadow:0 0.1rem 2rem rgba(0, 0, 0, 0.2);transform:scale(1.02);}
.services-box i {font-size:5rem;color:#fff;}
.services-box h3 {font-size:1.6rem;transition:0.5s ease;}
.services-box:hover h3 {color:#fbff00;}
.services-box p {font-size:0.8rem;margin:1rem 0rem 1rem;color:#fff;}
.services .btn {margin-bottom: 1rem;}

/*======================== FOOTER ========================*/
footer {z-index: 99;}
.footer-wrapper{ position: relative; background-repeat: no-repeat; background-position: right top; }
.footer-wrapper .widget.droidtale-widget { margin-bottom: 45px; margin-right: 50px;}
.footer-wrapper .droidtale-widget-title { margin-bottom: 30px; }
.footer-container{ padding-top: 50px; }
.droidtale-widget-title{ font-size: 17px; font-weight: 700; margin-bottom: 25px; text-transform: uppercase; letter-spacing: 1.5px; }
.four{ width: 33.333%; }
i.droidtale-icon { margin-right: 10px; }
.copyright-left { margin: 0px 15px; float: left; }
.copyright-right { margin: 0px 15px; float: right; }
.copyright-wrapper{ border-top-width: 1px; border-top-style: solid; }
.copyright-container{ padding: 15px 0px; }