/*-------------------------------------------*\
    CSS Applications 
    1. Global applications
    2. Responsive - Mobile First
\*-------------------------------------------*/

/*-------------------------------------------*\
    Font Family
\*-------------------------------------------*/

@font-face {
    font-family: 'Axiforma';
    src: url('../fonts/Axiforma-Bold.woff2') format('woff2'),
        url('../fonts/Axiforma-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Axiforma';
    src: url('../fonts/Axiforma-Regular.woff2') format('woff2'),
        url('../fonts/Axiforma-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Axiforma';
    src: url('../fonts/Axiforma-Light.woff2') format('woff2'),
        url('../fonts/Axiforma-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}


/*-------------------------------------------*\
    Reset CSS
\*-------------------------------------------*/

a,abbr,acronym,address,applet,article,aside,audio,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
input {
    outline: none;
}

/*-------------------------------------------*\
    Common
\*-------------------------------------------*/

html {
    height: 100%;
}
body {
    min-height: 100%;
}

html {
	scroll-behavior: smooth;
}

body {
    font-family: 'Axiforma', sans-serif;
    font-weight: normal;
    font-style: normal;
    color: #414141    ;
    background: #023373;
    -webkit-tap-highlight-color: transparent;
    background-image: url(../img/background-dice.svg);
    background-repeat: no-repeat;
    background-position: center center;;
}

a {
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
    cursor: pointer;
}

a:hover {
    text-decoration: none;
}

.hide {
    display: none !important;
}

img {
    max-width: 100%;
    height: auto;
}

.videocontainer,
.wp-block-embed__wrapper {
    width:100%;
    height:0;
    padding-bottom:56.25%;
    overflow:hidden;
    position:relative
}

.videocontainer.r1,
.wp-block-embed__wrapper.r1 {
    padding-bottom:100%
}

.videocontainer iframe,
.videocontainer embed,
.videocontainer object,
.wp-block-embed__wrapper iframe,
.wp-block-embed__wrapper embed,
.wp-block-embed__wrapper object {
    width:100%!important;
    height:100%!important;
    position:absolute;
    top:0;
    left:0
}

.clearfix {
    clear: both;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.remove-padding-top {    
    padding-top: 0px !important;
}

.remove-padding-bottom {
    padding-bottom: 0px !important;
}

.remove-padding-left {
    padding-left: 0px !important;
}

.remove-padding-right {
    padding-right: 0px !important;
}

.remove-margin-top {
    margin-top: 0px !important;
}

.remove-margin-bottom {
    margin-bottom: 0px !important;
}

.remove-margin-left {
    margin-left: 0px !important;
}

.remove-margin-right {
    margin-right: 0px !important;
}

/*-------------------------------------------*\
    Colors
\*-------------------------------------------*/

.bg-white {
    background-color: #ffffff;
}

.white {
    color: #fff;
}

.bg-blue {
    background-color: #023373;
}

.blue {
    color: #023373;
}

.bg-pink {
    background-color: #d92b5a;
}

.pink {
    color: #d92b5a;
}

.bg-sand {
    background-color: #f4ebd3;
}

.sand {
    color: #f4ebd3;
}

/*-------------------------------------------*\
    Form
\*-------------------------------------------*/

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #ffffff;
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #ffffff;
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: #ffffff;
}

/*-------------------------------------------*\
    Pagination
\*-------------------------------------------*/

.pagination.post-content {
    text-align: center;
}

/*-------------------------------------------*\
    Link Content
\*-------------------------------------------*/


/*-------------------------------------------*\
    Reponsive - 200px
\*-------------------------------------------*/

@media screen and (min-width: 200px) {
    
    /*-------------------------------------------*\
        Common - 200px
    \*-------------------------------------------*/

    body {
        background-size: 168px;
    }
    
    .hide-mobile {
        display: none !important;
    }

    /*-------------------------------------------*\
        Wrapper - 200px
    \*-------------------------------------------*/

    .wrap-content {
        margin: 0 auto;
        margin-left: 30px;
        margin-right: 30px;
        max-width: 1120px;
        position: relative;
    }

    .wrap-home {
        max-width: 600px;
        margin: 30px auto;
        padding: 0 30px;
    }

    /*-------------------------------------------*\
        Buttons - 200px
    \*-------------------------------------------*/

    .btn {
        display: block;
        border-radius: 25px;
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        text-align: center;
    }
    
    /*-------------------------------------------*\
        Header - 200px
    \*-------------------------------------------*/

    .header .header-logo {
        display: block;
        width: 93%;
        margin: 0 auto;
        padding-top: 75px;
    }

    /*-------------------------------------------*\
        Footer - 200px
    \*-------------------------------------------*/

    .footer {
        position: absolute;
        bottom: 45px;
        left: 0;
        right: 0;
        text-align: center;
        color: #ffffff;
        font-size: 9px;
        line-height: 14px;
    }

    /*-------------------------------------------*\
        Home - 200px
    \*-------------------------------------------*/
    
    .home .btn-actions {
        position: absolute;
        top: 170px;
        bottom: 90px;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .home .btn-actions form {
        width: 100%;
    }

    .home .btn-actions .btn {
        font-weight: bold;
        font-size: 20px;
        padding: 15px 0;
    }

    .home .btn-actions .btn-actions-create {
        margin-bottom: 25px;
    }

    /*-------------------------------------------*\
        Body - 200px
    \*-------------------------------------------*/

   

    /*-------------------------------------------*\
        Detail page - 200px
    \*-------------------------------------------*/


    /*-------------------------------------------*\
        Error 404 - 200px
    \*-------------------------------------------*/

    .e404 {
        text-align: center;
    }

    .e404 .post-content {
        padding: 80px 0;
    }

    .e404 h1 {
        font-size: 22px;
        line-height: 28px;
        font-weight: bold;
        margin-bottom: 18px;
    }

    /*-------------------------------------------*\
        Modal - 200px
    \*-------------------------------------------*/

    .modal {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 10; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100%; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(0,0,0); /* Fallback color */
        background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }

    .modal-header {    
        position: relative;
        padding: 20px;
        background-color: #5cb85c;
        color: white;
    }

    .modal-header h2 {
        font-size: 28px !important;
        font-weight: bold;
    }

    .modal-header.success {
        background: #71C900;
    }

    .modal-header.error {
        background: #D90D1E;
    }

    .modal-header .modal-close {
        cursor: pointer;
        position: absolute;
        font-size: 50px;    
        right: 17px;
        top: 6px;
    }

    /* Modal Body */
    .modal-body {
        padding: 20px;
        font-size: 16px;
        line-height: 21px;    
    }

    /* Modal Content/Box */
    .modal-content {
        background-color: #fefefe;
        margin: 15% auto; /* 15% from the top and centered */        
        width: 80%; /* Could be more or less, depending on screen size */
        -webkit-box-shadow: 2px 2px 15px 5px rgba(0,0,0,0.2);
        box-shadow: 2px 2px 15px 5px rgba(0,0,0,0.2);
    }

}

/*-------------------------------------------*\
    Mobile - 414px
\*-------------------------------------------*/

@media screen and (min-width: 414px) {



}    

/*-------------------------------------------*\
    Tablet portrait - 768px
\*-------------------------------------------*/

@media screen and (min-width: 768px) {

    /*-------------------------------------------*\
        Common - 768px
    \*-------------------------------------------*/

    .hide-tablet {
        display: none;
    }

    .show-tablet {
        display: block;
    }

    /*-------------------------------------------*\
        Header - 768px
    \*-------------------------------------------*/

    .header.wrap-home {
        margin: 0 auto;
        max-width: 660px;
    }

    .header .header-logo {
        width: 100%;
    }

    /*-------------------------------------------*\
        Footer - 768px
    \*-------------------------------------------*/

    .footer {
        font-size: 15px;
        line-height: 30px;
    }



}

/*-------------------------------------------*\
    Desktop - 1180px
\*-------------------------------------------*/

@media screen and (min-width: 1180px) {
    
    /*-------------------------------------------*\
        Common - 1180px
    \*-------------------------------------------*/
    
    .hide-mobile {
        display: block !important;
    }

    .hide-desktop {
        display: none !important;
    }

    /*-------------------------------------------*\
        Wrapper - 1180px
    \*-------------------------------------------*/

    .wrap-content {
        max-width: 1120px;
        margin-left: auto;
        margin-right: auto;
    }

    

    /*-------------------------------------------*\
        Header - 1180px
    \*-------------------------------------------*/

   

    /*-------------------------------------------*\
        Footer - 1180px
    \*-------------------------------------------*/
    
   

    /*-------------------------------------------*\
        Error 404 - 1180px
    \*-------------------------------------------*/

    .page .e404 .post-content {
        float: none;
        width: auto;
    }


    /*-------------------------------------------*\
        Modal - 1180px
    \*-------------------------------------------*/

    .modal-content {
        width: 50%;
    }

}

/*------------------------------------*\
    MISC
\*------------------------------------*/

::selection {
	background:#BD0A1F;
	color:#ffffff;
	text-shadow:none;
}

::-webkit-selection {
	background:#BD0A1F;
	color:#ffffff;
	text-shadow:none;
}

::-moz-selection {
	background:#BD0A1F;
	color:#ffffff;
	text-shadow:none;
}

/*------------------------------------*\
    PRINT
\*------------------------------------*/

@media print {
    
	* {
		background:transparent !important;
		color:#000 !important;
		box-shadow:none !important;
		text-shadow:none !important;
	}

	a,
	a:visited {
		text-decoration:underline;
	}

	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content:"";
	}

	pre,blockquote {
		border:1px solid #999;
		page-break-inside:avoid;
	}

	thead {
		display:table-header-group;
	}

	tr,img {
		page-break-inside:avoid;
	}

	img {
		max-width:100% !important;
	}
	@page {
		margin:0.5cm;
	}

	p,
	h2,
	h3 {
		orphans:3;
		widows:3;
	}
	h2,
	h3 {
		page-break-after:avoid;
	}
}