@font-face {
    font-family: 'icomoon';
    src:    url('fonts/icomoon.eot?tlpisv');
    src:    url('fonts/icomoon.eot?tlpisv#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?tlpisv') format('truetype'),
        url('fonts/icomoon.woff?tlpisv') format('woff'),
        url('fonts/icomoon.svg?tlpisv#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}
*{
    margin:0px;
    padding:0px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    -webkit-transition: all 500ms ease;
    -moz-transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    transition: all 500ms ease;
    }

html{
    box-sizing:inherit;
    font-family:calibri, arial, helvetica, sans-serif;
}

nav{
    width:100%;
    background: #3a88d8;
    height:50px;
    position:fixed;
    top:0px;
    z-index:10;
}

.nav-company {
    width:100%;
    background: #1c2a73;
    height:50px;
    position:fixed;
    top:0px;
    z-index:10;
}

#menu-wrapper{
    max-width:1280px;
    margin:auto;
}
#logowrapper{
    height:50px;
    float:left;
    padding:0px 20px;        
}    
#menubtn{
    display:none;
}

#logowrapper img{
    height:35px;
    top:50%;
    -webkit-transform: translatey(-50%);
    -ms-transform: translatey(-50%);
    transform: translatey(-50%);
}

#logowrapper .arrow {
    width: 5px;
    right: 5px;
    top: 50%;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid white;
    position: absolute;
}

#search#search.small {
    width: 30%;
}

#search.medium {
    width: 590px;
    max-width:initial;
    height: 32px;
}

#search.medium ~ #topik,
#search.large ~ #topik {
    width: 14%;
}

#search.large {
    width: 590px;
    min-height: 40px;
    height: auto;
    position: relative;
    max-width:initial;
}

#search.large ~ #filtercontainer #wopikFilter,
#search.medium ~ #filtercontainer #wopikFilter {
    display: none;
    position: absolute;
    width: 335px;
    -webkit-transform: translatex(-50%);
    -ms-transform: translatex(-50%);
    -o-transform: translatex(-50%);
    transform: translatex(-50%);
    background: #0b1862;
    height: 42px;
    top: 43px;
    padding: 0px 5px;
}

#search.large ~ #filtercontainer #wopikFilter li,
#search.medium ~ #filtercontainer #wopikFilter li {
    text-align: center;
    display: block;
    float: left;
}

#search.large ~ #filtercontainer #filtertoggler,
#search.medium ~ #filtercontainer #filtertoggler {
    width: 100%;
    display: block;
}

#search{
    max-width:300px;
    padding:5px;
    padding-top:0px;
    height:auto;
}

#search,
#id_searchboxkey {
    float: left;
    width:30%;
    position: relative;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
    min-height: auto;
    font-size: 1rem;
    height:32px;
    min-height:32px;
}


#id_searchboxkey {
    line-height: 1;
    resize: none;
    width: 100%;
    height: 41px;
    overflow: hidden;
    margin: 0px !important;
    position: relative;
    padding-bottom: 0rem;
    padding-left: 1.5rem;
    padding-top: 0rem;
}

#id_searchboxkey::-webkit-input-placeholder {
    color: gray;
}

#id_searchboxkey::-moz-placeholder {
    /* Firefox 18- */
    color: gray;
    opacity: 1
}

#id_searchboxkey::-moz-placeholder {
    /* Firefox 19+ */
    color: gray;
    opacity: 1
}

#id_searchboxkey::-ms-input-placeholder {
    color: gray;
}

#id_searchboxkey:focus::-webkit-input-placeholder {
    color: gray;
}

#id_searchboxkey:focus:-moz-placeholder {
    color: gray;
    opacity: 1;
}

#id_searchboxkey:focus::-moz-placeholder {
    color: gray;
    opacity: 1;
}

#id_searchboxkey:focus::-ms-input-placeholder {
    color: gray;
}

.title-margin {
    margin: 5px 2.5px !important;
}

#language {
    width: 100px;
    border: none;
    color: white;
    float: left;
    font-size: 10pt;
    height: 30px;
    line-height: 30px;
    cursor: pointer;
    padding-left: 5px;
}


#create_category {
    max-width:200px;
    padding:0px;
    padding-top:0px;
    height:auto;
    margin: 0px !important;
}

#create_category,
#categorybox {
    line-height: 1;
    float: left;
    width:100%;
    position: relative;
    -webkit-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    transition: all 300ms ease;
    min-height: auto;
    font-size: 1rem;
    height:32px;
    min-height:41px;
    padding-bottom: 0rem;
    padding-top: 0rem;
}

.ddlist {
    width: 95px !important;
    position: relative;
    height: 35px;
    max-width:300px;
    padding:5px;
    height:auto;
    float: left;
}


.ddlist .arrow {
    width: 5px;
    right: 5px;
    top: 50%;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid white;
    position: absolute;
}


#filtercontainer #filtertoggler:after {
    content: "";
    width: 5px;
    border-top: 5px solid white;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    position: absolute;
    top: 50%;
    right:-10px;
}
#wopikFilter {
    float: left;
    display: table;
    font-weight: bold;
    font-size: 1.4em;
    list-style: none;
    margin: 0px !important;
}
.personal #wopikFilter{
	background: #3a88d8;
}

#wopikFilter .icono, .icon {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    text-decoration: none;
    height: 30px;
    cursor: pointer;
}

#wopikFilter .icono a, .icon a, .icono i {
    color: white;
    font-size: 0.8rem;
    text-align: center;
    padding: 10px;
}

#wopikFilter .icono a:not([class='icon-listen']), .icon a:not([class='icon-listen']), .icono i {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

nav ul{
    float:right;
    height:50px;
    display:table;
    font-weight:bold;
    font-size:1.1em;
    list-style:none;
}
nav ul a, nav ul li{
    display:table-cell;
    vertical-align:middle;
    text-align:Center;
    padding:0px 20px;
    text-decoration:none;
    color:white;
}
nav ul a li:last-child{
    text-align:left;
}
#main{
    margin:50px auto 0px;
    padding:20px 30px;
    position: relative;
    overflow:hidden;
    min-height:74vh;
}
.center-cnt{
    max-width:1280px;
    margin: 0px auto;
    position: relative;
    padding:0px 20px;
}
#main h5{
    font-weight:bold;
    font-size: 2em;
    color: #3a88d8;
    text-align:center;
    max-width:1280px;
    margin:auto;
    margin-top:10px;
    margin-bottom:20px;
    width:80%;
}
#main ul{
    margin:0px auto;
    list-style: none;
    display: table;
    overflow: hidden;
    max-width:1280px;
    width:75%;
}
#main ul li{
    position:Relative;
    display: table-cell;
    vertical-align: middle;
}
#main ul li img{
    height:350px;
}
#main ul .last p { 
    font-size:1.3em;
    background:white;
    border-radius:50px;
    margin-bottom:20px;
    -webkit-box-shadow: 1px 4px 5px rgba(0,0,0,0.3);
    box-shadow: 1px 4px 5px rgba(0,0,0,0.3);
    margin-left:50px;
    text-align:left;
    /* z-index:1; */
    padding:40px;
    display:block;  
}
#main ul .last p:before{
    content:" ";
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 50px solid white;
    position: absolute;
    left:5px;
    bottom:30px;
    -webkit-transform: translatex(-50%);
    -moz-transform: translatex(-50%);
    -ms-transform: translatex(-50%);
    -o-transform: translatex(-50%);
    transform: translatex(-50%);
    z-index:-10;
}

.button{
    width:32%;
    height:42px;
    background:#1c2a73;
    border-radius: 10px;
    float:left;
    margin:-6px 0%;
    text-align:center;
    line-height:39px;
    font-size:0.6em;
    font-weight:bold;
    color:white;
    border-bottom:3pt solid rgba(0,0,0,0.3);
    cursor:pointer;
}

.selectWrapper{
    width: 35%;
    border-radius: 10px;
    overflow:hidden;
    float:left;
    margin:-6px 0%;
    line-height:39px;    
}

.selectBox{
    width: 181px;
    height:42px;
    border:0px;
    outline:none;
    background:#1c2a73;
    color:white;
    text-align:center;
    font-size:1.0em;
    font-weight:bold;
    border-bottom:3pt solid rgba(0,0,0,0.3);
}

.button-company{
    width:70%;
    height:42px;
    background:#1c2a73;
    border-radius: 10px;
    float:left;
    margin:-6px 0%;
    text-align:center;
    line-height:39px;
    font-size:1.0em;
    font-weight:bold;
    color:white;
    border-bottom:3pt solid rgba(0,0,0,0.3);
    cursor:pointer;
}

#button-company-act{
    width:34%;
    height:42px;
    background:#1c2a73;
    border-radius: 10px;
    float:left;
    margin:-6px 0%;
    text-align:center;
    line-height:39px;
    font-size:0.8em;
    font-weight:bold;
    color:white;
    border-bottom:3pt solid rgba(0,0,0,0.3);
    cursor:pointer;
}

.button:hover{
    background:#3a88d8;
}

.button:active{
    border-bottom:0px;
    padding-top:2px;
}

.hidden {
    display: none !important;
}

.disabled {
    opacity: 0.5;
}

input.disabled {
    pointer-events: none;
}

.why-wopik {
    width:37%;
    line-height:39px;
    font-size:0.7em;
    float: left;
    margin:-6px 0%;
}

#personal-social.button {
    display:none;
}

#personal-social.button span, #company-social.button-company span{
    width:50%;
    font-family:icomoon;
    height:100%;
    display: block;
    float:left;
    font-size:1.5em;
}

#personal-social.button a span:before, #company-social.button-company a span:before{
    font-size: 3rem !important;
    padding: 0px 32px;
}
/* Remove the css below to show three icons (when we add instagram)*/
/* #personal-social.button span{
    width: 50% !important;
} */
.button span:hover, .button-company span:hover{
    color: whitesmoke;
}

#personal-social.button:hover, #company-social.button-.button-company:hover{
    background:#1c2a73;
}

#user-menu {
    float: right;
    list-style: none;
    margin: 0px;
    height: 42px;
    width: 70px;
    position: relative;
    cursor: pointer;    
}

#user-menu {
    width: 100px;
}

#user-menu > li:first-child {
    display: block;
    width: 50%;
    text-align: center;
}

#user-menu > li:first-child a {
    width: 100%;
}

#user-menu #user-submenu {
    width: 50%;
    text-align: center;
}

#submenu {
    position: absolute;
    margin: auto;
    background: #3a88d8;
    list-style: none;
    width:150px;
    right: 0px;
    top: 100%;
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

.company #submenu {
    position: absolute;
    margin: auto;
    background: #1c2a73;
    list-style: none;
    width:150px;
    right: 0px;
    top: 100%;
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}

#submenu li {
    text-align: left;
    padding: 5px 20px;
    width: 100%;
    display: block;
    overflow: hidden;
    height: 40px;
    line-height: 1;
}

#submenu li.item:hover {
    background: white;
}

#submenu li.item:hover a {
    color: #3a88d8;
}

.company #submenu li.item:hover {
	background: white;
}

.company #submenu li.item:hover a {
    color: #1c2a73;
}

#submenu li a {
    color: white;
    width: 100% !important;
    display: block;
    font-size: 0, 8rem !important;
    padding: 0px 10px !important;
    text-align: left;
    line-height: 1.5;
}

#submenu li:first-child a {
    line-height: initial !important;
    margin-top: 5px;
}

#id_list_language {
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px'><polyline points='46.139,15.518 25.166,36.49 4.193,15.519'/></svg>");
    background-repeat:no-repeat;
    background-position: right 10px top 9px;
    background-size: 12px 14px;
    background-color: white;
    padding:5px;
    padding-right: 70px;
    width:auto;
    font-family:arial,tahoma;
    font-size:14px;
    text-align: left;
    text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);
    border-radius:0px;
    -webkit-border-radius:0;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid;
    outline:0;
    -webkit-transition:0.3s ease all;
    -moz-transition:0.3s ease all;
    -ms-transition:0.3s ease all;
    -o-transition:0.3s ease all;
    transition:0.3s ease all;
    text-overflow: '';
    -moz-appearance: none;
    text-indent: 0.01px;
}

.languageList {
    position: absolute;
    background: white;
    text-align: center;
    max-height: 170px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.3);
    left: 417px;
    top: 42px;
    z-index: 100;
}

.languagexpanded {
    width: 310px;
}

.langcontainer {
    width: 93px;
    float: left;
}

.languagexpanded .langcontainer{
	width:30%;
}

.languageList label {
    display: block;
    padding: 5px 20px;
    color: #0b1862;
    background: white;
    width: 100%;
    margin: 0px !important;
    font-size: 0.8rem;
}

.languageList a{
	color:black;
}

.languageList label:hover,
.languageList label:hover a,
.languageList label a:hover,
.languageList #other:hover,
.otherlangs label:hover {
    background: #3a88d8;
    color: white;
}

.languageList label:hover,
.otherlangs label:hover {
    background: #3a88d8;
    color: white;
}

.company.languageList label:hover,
.company.languageList label:hover a,
.company.languageList label a:hover,
.company.languageList #other:hover,
.company.otherlangs label:hover {
    background: #1c2a73;
    color: white;
}

.company.languageList label:hover,
.company.otherlangs label:hover {
    background: #1c2a73;
    color: white;
}


.languageList #otherlangs {
    float: left;
    width: 70%;
    max-height: 170px;
    overflow-y: auto;
    overflow-x: hidden;
}

#otherlangs label {
    width: 50%;
    float: left;
    padding: 5px 0px;
}
  
select::-ms-expand {
    display: none;
}
  
select:focus, select:active {
    border:1px solid;
    outline:0;
}
  
#characteristics{
    background: #3a88d8;
    height:150px;
}
#characteristics ul{
    list-style:none;
    display:table;
    min-height:150px;
}
#characteristics ul li{
    display:table-cell;
    vertical-align: middle;
    color:white;
    width:33.333%;
    height:150px;
}
#characteristics ul li .img{
    float:left;
    margin:0px 20px;
    height:150px;
}
#characteristics ul li .img img{
    width:60px;
    top:50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
#characteristics ul li .description{
    top:50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    position: relative;
}
#characteristics ul li p:first-child{
    font-weight:bold;
    font-size:2em;
}
#characteristics ul li p:last-child{
    font-weight:bold;
    font-size:1.2em;
}

footer{
    width:100%;
    height:50px;
    background:#303030;
}
footer ul{
    list-style:none;
    display:table;
    float:left;
}
footer ul li{
    height:50px;
    padding:0px 20px;
    line-height:50px;
    font-weight:bold;
    color:white;
    float:left;
}
footer img{
    float:right;
    position: relative;
    display: inline;
    height:35px;
    top:10px;
}
@media screen and (max-width:980px){
    nav p{
        font-size:1em;
    }
    nav ul{
        font-size:1em;
    }
    #main h5{
        margin-bottom:30px;
        font-size:1.5em;
    }
    #main ul{
        margin:0px auto;
    }
    #main .button{
        font-size:1.5em;
    }
    #characteristics{
        padding-bottom:30px;
    }
    #characteristics ul li{
    }
    #characteristics ul li .description{
        
    }
    #characteristics ul li .img{
        height:auto;
    }
    #characteristics ul li .img img{
        -webkit-transform: translatey(0);
        -moz-transform: translatey(0);
        -ms-transform: translatey(0);
        -o-transform: translatey(0);
        transform: translatey(0);
        top:0px;
    }
    #characteristics ul li p:first-child{
        font-size:1.5em
    }
    #characteristics ul li p:last-child{
        font-size:1em;
    }
}
@media screen and (max-width:900px){
    #main ul img{
        height:200px;
    }
    .button{
        width:80%;
        margin: 10px 10%;
    }
    #main h5{
        font-size:2em;
    }
    #characteristics {
        position: relative;
        overflow: hidden;
        height:auto;
    }
    #characteristics ul{
        display:block;
        margin:0px auto;
        width:100%;
        height:auto;
    }
    #characteristics ul li{
        width:100%;
		display: block;
		margin: 20px 0px;
		text-align:center;
    }
    #characteristics ul li .img{
        width:100%;
        display:block;
        margin: 0px 0px;
    }
    #characteristics ul li p:first-child{
        font-size:2em;
    }
    #characteristics ul li p:last-child{
        font-size:1.3em;
        max-width:80%;
        margin:auto;
    }
    
}
@media screen and (max-width:1024px){
    #main ul{
        width:100%;
        font-size:0.9em;
    }
}
@media screen and (max-width:900px){
    .activo{
        display:block;
        right:0px;
        z-index:1;
    }
    #menubtn{
	    display: block;
        position: absolute;
        right:20px;
        font-weight:bold;
        color:white;
        cursor:pointer;
        font-size:2em;
        font-family:icomoon;
        top:10px;
    }
    nav ul{
        display:block;
        position:fixed;
        height:100vh;
        right:-100%;
        background:#1c2a73;
        top:50px;
        padding-left:20px;
    }
    nav ul a, nav ul li{
        display:block;
        line-height:70px;
        position: relative;
        width:200px;
        text-align:left;
        padding:0px 0px;
        box-sizing: border-box;
    }
    
    .center-cnt{
        padding: 0px;
    }
    nav p{
        display:none;
    }
    #main h5{
        font-size:1.5em;
    }
    #main ul{
        display:block;
    }
    #main ul li{
        width:100%;
        display: block;
        text-align:center;
    }
    #main ul li img{
        margin:auto !important;
    }
    #main ul .last p{
        display:block;
        font-weight:bold;
        font-size:1.2em;
        background:white;
        border-radius:20px;
        margin-bottom:20px;
        position: relative;
        margin-top:30px;
        margin-left:0px;
        padding-top:20px;
    }
    #main ul .last p:before{
        content:" ";
        border-left: 30px solid transparent;
        border-right: 30px solid transparent;
        border-bottom: 20px solid white;
        position: absolute;
        -webkit-transform: translatex(-50%);
        -ms-transform: translatex(-50%);
        -o-transform: translatex(-50%);
        transform: translatex(-50%);
        top:-20px;
        left:50%;
        z-index:999;
        height:0px;        
    }
    .button{
        width:100%;
        margin:10px 0px;
    }
    footer{
        text-align:center;
        overflow:hidden;
        height:auto;
    }
    footer ul{
        width:100%;
    }
    footer ul li{
        width:25%;
    }
    footer img{
        margin:0px auto;
        float:none;
        top:0px;
    }
}